[HOLD for payment 2024-06-20] [$125] [Search v1] Receipt thumbnail background doesn't change back to correct color after hover

[luacmartins]

Coming from this thread, the hover styles are not being applied when the mouse exists the row item.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014338cee918b85ec5
• Upwork Job ID: 1800226670096480396
• Last Price Increase: 2024-06-10

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014338cee918b85ec5

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[ishpaul777]

Proposal

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

Receipt thumbnail background doesn't change back to correct color after hover

What is the root cause of that problem?

This comes from #42823, Here we are using a useHover hook

App/src/components/SelectionList/BaseListItem.tsx

Line 38 in 156db8c

const {hovered, bind} = useHover();

which sets onMouseLeave event.

App/src/hooks/useHover.ts

Line 9 in 2929a91

onMouseLeave: () => setHovered(false),

and then we also set onMouseLeave event here which overwrites the above event so the hover logic fails to work.

App/src/components/SelectionList/BaseListItem.tsx

Lines 95 to 96 in 2929a91

	onMouseUp={handleMouseUp}
	onMouseLeave={handleMouseUp}

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

Presently there are 2 different places that are handling the mousevents this leads to this bug, to solve this I propose we integrate useMouseContext and useHoverHook in one hook called useMouseEvents.

we'll use the hook like below:

    const {isMouseDownOnInput, bindMouseEvents, isHovered} = useMouseEvents();
    // rest of code
    ..
    ..
    ..
    <PressableWithFeedback
        // eslint-disable-next-line react/jsx-props-no-spreading
        {...bindMouseEvents(true, true)}
    // rest of code 

//hooks/useMouseEvents.tsx

import type React from 'react';
import {useState} from 'react';

function useMouseEvents() {
    const [isMouseDownOnInput, setIsMouseDownOnInput] = useState(false);
    const [isHovered, setIsHovered] = useState(false);

    const setMouseDown = () => setIsMouseDownOnInput(true);
    const setMouseUp = () => setIsMouseDownOnInput(false);

    const bindMouseEvents = (shouldStopPropagationOnMouseDown = false, shouldStopPropagationOnMouseUp = false) => ({
            onMouseUp: (e: React.MouseEvent<Element, MouseEvent>) => {
                if (shouldStopPropagationOnMouseUp) {
                    e.stopPropagation();
                }
                setMouseUp();
            },
            onMouseEnter: () => setIsHovered(true),
            onMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => {
                if (shouldStopPropagationOnMouseDown) {
                    e.stopPropagation();
                }
                setIsHovered(false);
                setIsMouseDownOnInput(true);
            }
    });

    return {isMouseDownOnInput, setMouseDown, setMouseUp, bindMouseEvents, isHovered}
}



export default useMouseEvents;

[eh2077]

@luacmartins I think this has been fixed in #43424 right?

[luacmartins]

Yes, it was. Thanks. Closing!

[ishpaul777]

hello @luacmartins, the root cause for this issue is still unfixed there might still be unidentified hover issues...

[luacmartins]

Do you have an example of an existing issue?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.82-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update receipt background color #43424

If no regressions arise, payment will be issued on 2024-06-20. 🎊

For reference, here are some details about the assignees on this issue:

• @eh2077 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eh2077] The PR that introduced the bug has been identified. Link to the PR:
• [@eh2077] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@eh2077] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@eh2077] Determine if we should create a regression test for this bug.
• [@eh2077] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@anmurali] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: