[$500] MacOS/Chrome - Background color is stuck on right click/long press on year in year search

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Open settings->profile->personal details->date of birth
3. Click on year to open year search
4. Right click on any unselected value and click on another value to close right click popup or long press on any value on mWeb
5. Hover on other messages in web and observe that background color is stuck on value used in step 4

Expected Result:

App should remove background color as soon as we hover on other value

Actual Result:

Background color is stuck on right click/long press on year in year search even on hovering on other value

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.71-8

Reproducible in staging?: Y

Reproducible in production?: Y

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

background.color.stuck.on.year.search.1.mov

2023-09-19.21.52.17.mov

Expensify/Expensify Issue URL:

Issue reported by: @dhanashree-sawant Dattaram Sawant

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695112322258699

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01790aaa0a663bd0f8
• Upwork Job ID: 1704394005281148928
• Last Price Increase: 2023-09-20
• Automatic offers:
• bernhardoj | Contributor | 26982141
• dhanashree-sawant | Reporter | 26982143

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01790aaa0a663bd0f8

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to @miljakljajic (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[studentofcoding]

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

The hover state is not being updated correctly when right-clicking on an element. This is because the PressableWithoutFeedback component does not have an event handler for right-click events. As a result, the hover state remains stuck when right-clicking on the element.

What changes do you think we should make in order to solve the problem?

To fix the issue and make the hover state active when hovering over another element, you can add an onContextMenu event handler to the PressableWithoutFeedback component. This event handler will update the hoveredDay state to null when a right-click event occurs. and also keep tracking onMouseEnter & Leave to track the hovered state

Then on hovered, make the background change

<PressableWithoutFeedback
    key={`${index}_day-${day}`}
    disabled={isDisabled}
    onPress={() => this.onDayPressed(day)}
    onContextMenu={() => this.setState({ hoveredDay: null })}
    style={styles.calendarDayRoot}
    accessibilityLabel={day ? day.toString() : undefined}
    focusable={Boolean(day)}
    accessible={Boolean(day)}
    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
    onMouseEnter={() => this.setState({ hoveredDay: day })}
    onMouseLeave={() => this.setState({ hoveredDay: null })}
>
    {({ hovered, pressed }) => (
        <View
            style={[
                styles.calendarDayContainer,
                isSelected ? styles.calendarDayContainerSelected : {},
                !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered || day === this.state.hoveredDay, pressed)) : {},
            ]}
        >
            <Text style={isDisabled ? styles.buttonOpacityDisabled : styles.dayText}>{day}</Text>
        </View>
    )}
</PressableWithoutFeedback>

What alternative solutions did you explore? (Optional)

Instead of using theonMouseEnter and onMouseLeave event handlers, we can use the onMouseOver event handler to update the hoveredDay state. The onMouseOver event will be triggered when the mouse pointer enters or leaves the element or any of its child elements.

<PressableWithoutFeedback
    key={`${index}_day-${day}`}
    disabled={isDisabled}
    onPress={() => this.onDayPressed(day)}
    onContextMenu={() => this.setState({ hoveredDay: null })}
    style={styles.calendarDayRoot}
    accessibilityLabel={day ? day.toString() : undefined}
    focusable={Boolean(day)}
    accessible={Boolean(day)}
    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
    onMouseOver={() => this.setState({ hoveredDay: day })}
>
    {({ hovered, pressed }) => (
        <View
            style={[
                styles.calendarDayContainer,
                isSelected ? styles.calendarDayContainerSelected : {},
                !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered || day === this.state.hoveredDay, pressed)) : {},
            ]}
        >
            <Text style={isDisabled ? styles.buttonOpacityDisabled : styles.dayText}>{day}</Text>
        </View>
    )}
</PressableWithoutFeedback>

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Background color is stuck on right click/long press on year in year search even on hovering on other value

What is the root cause of that problem?

Here, we'll show focused background color if the Pressable is focused.

When right click and dismiss the context menu, the onBlur of the Pressable is not triggered so focused is still true, although we already click away from the Pressable. This is the same root cause that causes us to rely on both onMouseLeave and onBlur for the Hoverable here.

What changes do you think we should make in order to solve the problem?

We should call .blur() in onHoverOut of the Pressable to make sure it's blurred properly when moving outside of the Pressable

We can add below this line

onHoverOut={(e) => {
    if (props.onHoverOut) {
        props.onHoverOut(e);
    }
    if (innerRef && innerRef.current) {
        innerRef.current.blur();
    }
}}

The innerRef should be defined as the ref of the Pressable

What alternative solutions did you explore? (Optional)

NA