[Due for payment 2026-01-05] [$250] Chevron on Reports → Expense Row Does Not Use Correct Hover Style

[m-natarajan]

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.72-0
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
Expensify/Expensify Issue URL:
Issue reported by: @dubielzyk-expensify
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to Reports > Expenses
2. Hover anywhere on a given expense row

Expected Result:

When hovering anywhere on the row, the chevron icon should adopt the hover color (matching the row hover interaction pattern used elsewhere in the app).

Actual Result:

The chevron only gets the hover color when hovering directly over the icon, not the entire row.

Workaround:

Unknown

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

Add any screenshot/video evidence

CleanShot.2025-12-04.at.11.56.27.mp4

Recording.2025.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021997864138419873811
• Upwork Job ID: 1997864138419873811
• Last Price Increase: 2025-12-08
• Automatic offers:
• daledah | Contributor | 109774124

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[daledah]

Proposal

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

The chevron only gets the hover color when hovering directly over the icon, not the entire row.

What is the root cause of that problem?

We are using hover from PressableWithFeedback here

App/src/components/TransactionItemRow/index.tsx

Lines 563 to 571 in d264462

	{({hovered}) => {
	return (
	<Icon
	src={Expensicons.ArrowRight}
	fill={theme.icon}
	additionalStyles={!hovered && styles.opacitySemiTransparent}
	small
	/>
	);

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

1. We should add the isHover style for the TransactionItemRow component

2. Then update this style to

     <Icon
          src={Expensicons.ArrowRight}
          fill={itheme.icon}
          additionalStyles={!isHovered && styles.opacitySemiTransparent}
          small
      />

3. Then pass isHovered as hovered from PressableWithFeedback

    isHovered={!!hovered}

App/src/components/SelectionListWithSections/Search/TransactionListItem.tsx

Lines 175 to 181 in d264462

	<TransactionItemRow
	transactionItem={transactionItem}
	report={transactionItem.report}
	shouldShowTooltip={showTooltip}
	onButtonPress={handleActionButtonPress}
	onCheckboxPress={handleCheckboxPress}
	shouldUseNarrowLayout={!isLargeScreenWidth}

Note: we should do the same with other places that use TransactionItemRow component and other list items

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.

[daledah]

To make it easier to test, this is the test branch and the result below:

Screen.Recording.2025-12-05.at.01.21.40.mov

[nkdengineer]

Proposal

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

The chevron only gets the hover color when hovering directly over the icon, not the entire row.

What is the root cause of that problem?

The right icon is using its own hovered state, which is only true when the icon is hovered. So additionalStyles opacity is still applied when hovering outside the icon

App/src/components/TransactionItemRow/index.tsx

Lines 563 to 571 in d264462

	{({hovered}) => {
	return (
	<Icon
	src={Expensicons.ArrowRight}
	fill={theme.icon}
	additionalStyles={!hovered && styles.opacitySemiTransparent}
	small
	/>
	);

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

1. Get hovered state of the parent component here and pass it down to TransactionItemRow as isHovered prop

App/src/components/SelectionListWithSections/Search/TransactionListItem.tsx

Line 148 in d264462

<PressableWithFeedback

2. Then update additionalStyles when the row is hovered. Optional: We can remove hovered here and only use isHovered prop.

additionalStyles={(!hovered && !isHovered) && styles.opacitySemiTransparent} 

App/src/components/TransactionItemRow/index.tsx

Lines 563 to 571 in d264462

	{({hovered}) => {
	return (
	<Icon
	src={Expensicons.ArrowRight}
	fill={theme.icon}
	additionalStyles={!hovered && styles.opacitySemiTransparent}
	small
	/>
	);

What alternative solutions did you explore? (Optional)

NA

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.

[dubielzyk-expensify]

cc @Expensify/design for viz

[dannymcclain]

Thank you for reporting this @dubielzyk-expensify!

[melvin-bot]

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