[HOLD #54054] When hovering on the button, there is no interaction.

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.79-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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
Expensify/Expensify Issue URL:
Issue reported by: @dukenv0307
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Create a new workspace
2. Enable workflow -> add approval
3. Create an expense
4. Move to search page
5. Select the expense
6. Hover Approve button

Expected Result:

Have interaction when hover on button

Actual Result:

When hovering on the button, there is no interaction.

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

bug.1.mov

Recording.869.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Triggered auto assignment to @garrettmknight (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.

[jayeshmangwani]

Proposal

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

When hovering on the button, there is no interaction

What is the root cause of that problem?

In the ActionCell component, we are using the Button to display actions like "Approve," "Pay," "Submit," etc. For the button, we pass innerStyles to control the background color. When a row is selected, we conditionally apply styles.buttonSuccessHovered or styles.buttonDefaultHovered. However, the default success hover style of the button is currently aligning with buttonSuccessHovered, which prevents hover interactions from being noticeable.

App/src/components/SelectionList/Search/ActionCell.tsx

Lines 55 to 60 in dae99d1

	const getButtonInnerStyles = useCallback(
	(shouldUseSuccessStyle: boolean) => {
	if (!isSelected) {
	return {};
	}
	return shouldUseSuccessStyle ? styles.buttonSuccessHovered : styles.buttonDefaultHovered;

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

To resolve this, we should introduce additional hover styling by using hoverStyles. These styles should include a check for the shouldUseSuccessStyle prop to differentiate between default and success hover states. We can either create new styles for the default and success hover states or reuse existing ones after confirming the background colors with the design team.

hoverStyles={getButtonHoverStyles(shouldUseSuccessStyleProp)}

buttonNewDefaultHovered: {
    backgroundColor: theme.buttonHoveredBG,
    borderWidth: 0,
},

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This is a UI issue, and I don’t believe any automated test could effectively prevent this problem.

What alternative solutions did you explore? (Optional)

Altenatively, we can pass the only innerStyles to Button when we have shouldUseSuccessStyle is false, so that when button isSelected is true we pass the default success style to button so that hover issue will not be visible here, on that case we need to pass the hoverStyles for only default button case

[daledah]

Proposal

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

When hovering on the button, there is no interaction.

What is the root cause of that problem?

We don't set hoverStyles for this button so it will use default hoverStyles here

App/src/components/SelectionList/Search/ActionCell.tsx

Lines 108 to 118 in dae99d1

	<Button
	text={text}
	onPress={goToItem}
	small
	style={[styles.w100]}
	innerStyles={getButtonInnerStyles(shouldUseSuccessStyleProp)}
	isLoading={isLoading}
	success={shouldUseSuccessStyleProp}
	isDisabled={isOffline}
	/>
	);

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

We should create a function getHoverStyles to get hoverStyles as we did with innerStyles

    const getHoverStyles = useCallback(
        (shouldUseSuccessStyle: boolean) => {
            if (!isSelected) {
                return;
            }
            if (shouldUseSuccessStyle) {
                return styles.buttonSuccess;
            }
            return {backgroundColor: theme.buttonPressedBG, borderWidth: 0};
        },
        [isSelected, theme.buttonPressedBG, styles.buttonSuccess],
    );

And use this in this button

     hoverStyles={getHoverStyles(shouldUseSuccessStyleProp)}

And this button

     hoverStyles={getHoverStyles(false)}

Note: Minor change styles can be discussed during the PR phase.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[jayeshmangwani]

@luacmartins, based on this comment #53117 (comment), do we need to update the hover styling here on this Issue, or are the changes being addressed in another PR?

[dukenv0307]

@garrettmknight I can help take it as C+ since I had the prior context on this. Thanks

[garrettmknight]

Let's wait for @luacmartins to confirm that this isn't being handled elsewhere first.

[luacmartins]

Let's put this on hold for #54054

[garrettmknight]

Dropping to weekly while we hold.

[luacmartins]

cc @mananjadhav let's make sure this issue is also solved as part of #54054