[Due for payment 2025-06-05] [$250] Non-editable report field shows right arrow and disabled mouse pointer

[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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
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 Reports > Expense reports
2. Open any report with paid status
3. Hover over the read-only field
4. Observe the right arrow and disabled pointer

Expected Result:

No right arrow should be shown
No special cursor (like a disabled pointer) should appear
The row should be styled clearly as read-only, without implying any interactive behavior

Actual Result:

A right arrow appears on the right side of the field, suggesting it can be clicked
The mouse cursor changes to a "not-allowed" or disabled pointer on hover

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-05-14.at.10.28.51.mp4

Screenshot of the expected result:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021923114703219432096
• Upwork Job ID: 1923114703219432096
• Last Price Increase: 2025-05-15

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.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[m-natarajan]

Proposal by @dukenv0307

Proposal

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

Non-editable report field shows right arrow and disabled mouse pointer.

What is the root cause of that problem?

We always show the right icon and disabled when field is disabled

App/src/components/MoneyRequestReportView/MoneyRequestViewReportFields.tsx

Lines 58 to 75 in c45e5b3

	<MenuItemWithTopDescription
	description={Str.UCFirst(reportField.name)}
	title={reportField.fieldValue}
	onPress={() => {
	Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report?.reportID, report?.policyID, reportField.fieldID, Navigation.getActiveRoute()));
	}}
	shouldShowRightIcon
	disabled={reportField.isFieldDisabled}
	wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
	shouldGreyOutWhenDisabled={false}
	numberOfLinesTitle={0}
	interactive={!reportField.isFieldDisabled}
	shouldStackHorizontally={false}
	onSecondaryInteraction={() => {}}
	titleWithTooltips={[]}
	brickRoadIndicator={reportField.violation ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	errorText={reportField.violationTranslation}
	/>

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

1. We should remove disabled={reportField.isFieldDisabled}

App/src/components/MoneyRequestReportView/MoneyRequestViewReportFields.tsx

Line 65 in c45e5b3

disabled={reportField.isFieldDisabled}

2. Don't show shouldShowRightIcon when field is disabled

        shouldShowRightIcon={!reportField.isFieldDisabled}

Note: We should also apply the same to the MoneyReportView component here to make it consistent.

App/src/components/ReportActionItem/MoneyReportView.tsx

Lines 159 to 178 in c45e5b3

	<MenuItemWithTopDescription
	description={Str.UCFirst(reportField.name)}
	title={fieldValue}
	onPress={() => {
	Navigation.navigate(
	ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report?.reportID, report?.policyID, reportField.fieldID, Navigation.getReportRHPActiveRoute()),
	);
	}}
	shouldShowRightIcon
	disabled={isFieldDisabled}
	wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
	shouldGreyOutWhenDisabled={false}
	numberOfLinesTitle={0}
	interactive
	shouldStackHorizontally={false}
	onSecondaryInteraction={() => {}}
	titleWithTooltips={[]}
	brickRoadIndicator={violation ? 'error' : undefined}
	errorText={violationTranslation}
	/>

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

None UI bug

What alternative solutions did you explore? (Optional)

[DylanDylann]

@CortneyOfstad Please assign me as C+ on this issue as mentioned here

I can reproduce this bug. This is step

1. Login as admin of workspace
2. Invite an employee
3. Login to the employee account
4. Submit 2 expenses
5. Login as admin
6. Approve and pay the above expenses
7. Login to the employee account and go to the expense report
8. See that the report field is disabled but the right arrow still displays

Screen.Recording.2025-05-14.at.23.34.22.mov

[CortneyOfstad]

Was able to recreate, so getting eyes!

[melvin-bot]

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