[Due for payment 2025-10-30] [$250] Reports page - Incorrect border color on subscript workspace avatar when you hover over a row

[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!

---

Version Number: 9.2.14-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: @shawnborton
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Go to any workspace chat
3. Create report
4. Go to Reports page > reports > hover over a row > select the report

Expected Result:

The border color should change to match the background of the card when you hover.

Actual Result:

The border color doesn't change to match the background of the card when you hover.
It does change on select though.

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Recording.3415.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021971113214449024369
• Upwork Job ID: 1971113214449024369
• Last Price Increase: 2025-10-02

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

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

[izarutskaya]

@dukenv0307

Proposal

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

Incorrect border color on subscript workspace avatar when you hover over a row in Reports page

What is the root cause of that problem?

We are calculating the border color using the isFocused props

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

Lines 178 to 179 in e34de6f

	const avatarBorderColor =
	StyleUtils.getItemBackgroundColorStyle(!!reportItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;

and the source of the isFocused value is from the useArrowKeyFocusManager hook in the BaseSearchList component

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Lines 44 to 54 in e34de6f

	const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
	initialFocusedIndex: -1,
	maxIndex: flattenedItemsLength - 1,
	isActive: isFocused,
	onFocusedIndexChange: (index: number) => {
	scrollToIndex?.(index);
	},
	// eslint-disable-next-line react-compiler/react-compiler
	...(!hasKeyBeenPressed.current && {setHasKeyBeenPressed}),
	isFocused,
	});

so the background will change when the user uses the arrow to focus but will not change when the user hovers on the item because isFocus will be false

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

We should cover the hover case here by

1. Create a new props called isHover in ReportListItemHeader component and update avatarBorderColor

    const avatarBorderColor =
        StyleUtils.getItemBackgroundColorStyle(!!reportItem.isSelected, !!isFocused || !!isHovered, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;

2. In TransactionGroupListItem component, we can get the hover state from PressableWithFeedback

    <PressableWithFeedback ...>
        {({hovered}) => (
            ...
            <AnimatedCollapsible
                ...
                header={getHeader(hovered)}
                ...
            >
            ...
        )}
    </PressableWithFeedback>

3. Then pass isHovered as hovered here

    [CONST.SEARCH.GROUP_BY.REPORTS]: (
        <ReportListItemHeader
            report={groupItem as TransactionReportGroupListItemType}
            isHovered={hovered}
            ...
        />
    ),

We should also check other components that use isFocused to calculate avatarBorderColor

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

None

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[lydiabarclay]

Reassigning due to ZeroChurn prioritization (see post here)

[lydiabarclay]

Hmmm that was supposed to assign a BZ/Concierge member.

[lydiabarclay]

Apologies @trjExpensify feel free to unassign if necessary

[trjExpensify]

Haha s'all good, I get assigned for BZ chores too. :)

@Expensify/design ya'll good with this?

[lydiabarclay]

I'll find a new Conci BZ manually tomm