[Awaiting Payment 29th April] [$250] Web - Category - No hover effect for an already selected category

[kbecciv]

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

---

Version Number: 1.4.60-1
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Create a collect workspace on OD and enable chat for newDot
• Go to tags settings on OD for the collect workspace and add a few tags

1. Navigate to staging.new.expensify.com
2. Open workspace chat page
3. Start a manual IOU flow and select a category
4. Click on tag and select one
5. Click on category
6. Press the keyboard down arrow a few times to shift the focus
7. Hover over the selected category
8. Go back and click on tags
9. Press the keyboard down arrow a few times
10. Hover over the selected tag value

Expected Result:

There should be a hover effect visible for the selected category as is the case for the selected tag

Actual Result:

There is no hover effect for the selected category after the focus has shifted from it which is different from the behavior seen for the selected independent tag value

Workaround:

n/a

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6438413_1712305224995.bandicam_2024-04-05_11-19-57-298.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0135176cb3aeb0eafc
• Upwork Job ID: 1776321147884154880
• Last Price Increase: 2024-04-05
• Automatic offers:
• jayeshmangwani | Reviewer | 0
• Krishna2323 | Contributor | 0

[melvin-bot]

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

[kbecciv]

@lschurr I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[kbecciv]

We think that this bug might be related to #wave-collect - Release 1

[bernhardoj]

Proposal

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

There is no hover effect when hovering selected category.

What is the root cause of that problem?

The category picker page uses SelectionList. The BaseListItem won't show the hover effect if the item is selected.

App/src/components/SelectionList/BaseListItem.tsx

Line 62 in 51c039d

hoverStyle={!item.isDisabled && !item.isSelected && styles.hoveredComponentBG}

That's why there is no hover effect on the selected item even after we move away the item focus.

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

Instead of check whether the item is selected or not, we should check whether the item is focused or not.

hoverStyle={!item.isDisabled && !isFocused && styles.hoveredComponentBG}

or just remove the selected condition

[Krishna2323]

Proposal

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

There is no hover effect when hovering selected category.

What is the root cause of that problem?

In BaseListItem we don't pass the hoverStyle when item is selected, it is because in TableListItem we want to use activeComponentBG when item is selected and we don't want to change the bg when item is hovered because we already have applied activeComponentBG.

App/src/components/SelectionList/BaseListItem.tsx

Line 62 in 51c039d

hoverStyle={!item.isDisabled && !item.isSelected && styles.hoveredComponentBG}

App/src/components/SelectionList/TableListItem.tsx

Line 45 in b10893a

pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive]]}

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

We should remove !item.isSelected check from BaseListItem and also accept a new prop called hoverStyle. In TableListItem we will pass hoverStyle={item.isSelected && styles.activeComponentBG}.

Update hoverStyle in BaseListItem.

hoverStyle={!item.isDisabled && [styles.hoveredComponentBG, hoverStyle]}

Note: We also need to make few more changes like adding type in BaseListItemProps but those are very minor.

Result

hover_issue_category_picker.mp4

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0135176cb3aeb0eafc