[$250] mWeb-Reports -Different navigation with device´s and app´s back buttons when tracking expense

[mitarachim]

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.1.31-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): ibellicotest+616@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome
App Component: Other

Action Performed:

1. Open the staging.new.expensify.com website.
2. Submit two different manual expenses to Self DM.
3. Navigate to "Reports"
4. Open the first created expense.
5. Tap on report header.
6. Tap on "Share with my accountant"
7. Select a workspace, add a merchant and submit the expense.
8. Dismiss RHP using the back button on the top left corner.
9. Note that you land on workspace chat, and tapping back button again, leads to LHN.
10. Return to "Reports"
11. Open the second expense.
12. Tap on report header.
13. Tap on "Share with my accountant"
14. Select the same workspace, add a merchant and submit the expense.
15. Dismiss the RHP using the device´s back button this time.
16. Note that you land on "Reports" again.

Expected Result:

After submitting a track expense to a workspace while on "Reports", using device´s back button and app´s back button, should lead to the same page. User should land on "Reports" again on both cases.

Actual Result:

After submitting a track expense while on "Reports", using device´s back button to dismiss RHP, leads to "Reports" section again, while using the app´s back button, leads to workspace chat and to LHN if used again.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6809721_1745341262463.Different.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021915450506751744969
• Upwork Job ID: 1915450506751744969
• Last Price Increase: 2025-04-24
• Automatic offers:
• thelullabyy | Contributor | 107112184

Issue Owner

Current Issue Owner: @flaviadefaria

[melvin-bot]

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

[thelullabyy]

Proposal

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

• After submitting a tracked expense while on the "Reports" tab, pressing the app's back button navigates first to the workspace chat, and then to the LHN (Left-Hand Navigation), which is unexpected and confusing for users.

What is the root cause of that problem?

• The issue stems from the navigation logic executed when sharing an expense with an accountant. Here's the relevant code:
  

  App/src/libs/actions/IOU.ts

  Lines 5462 to 5473 in c618014

  	if (!params.isRetry) {
  	dismissModalAndOpenReportInInboxTab(activeReportID);
  	}
  	if (action === CONST.IOU.ACTION.SHARE) {
  	if (isSearchTopmostFullScreenRoute() && activeReportID) {
  	Navigation.setNavigationActionToMicrotaskQueue(() => {
  	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(activeReportID), {forceReplace: true});
  	});
  	}
  	Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.navigate(ROUTES.ROOM_INVITE.getRoute(activeReportID, CONST.IOU.SHARE.ROLE.ACCOUNTANT)));
  	}

• In this flow, after sharing the track expense to an accountant, the app navigates to the workspace chat (isInNarrowPaneModal is false) and then to the RoomMembers_Invite screen. As a result, pressing the back button returns the user to the workspace chat (isInNarrowPaneModal is false), and pressing it again leads to the LHN.

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

• We should update the behavior so that:

  • Pressing the back button on the RoomMembers_Invite screen navigates to the workspace chat (isInNarrowPaneModal is true).
  • Pressing it again navigates to the Reports.

• To accomplish this, we need to update the navigation logic at:
  

  App/src/libs/actions/IOU.ts

  Lines 5462 to 5473 in c618014

  	if (!params.isRetry) {
  	dismissModalAndOpenReportInInboxTab(activeReportID);
  	}
  	if (action === CONST.IOU.ACTION.SHARE) {
  	if (isSearchTopmostFullScreenRoute() && activeReportID) {
  	Navigation.setNavigationActionToMicrotaskQueue(() => {
  	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(activeReportID), {forceReplace: true});
  	});
  	}
  	Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.navigate(ROUTES.ROOM_INVITE.getRoute(activeReportID, CONST.IOU.SHARE.ROLE.ACCOUNTANT)));
  	}

if (!params.isRetry && !isSearchTopmostFullScreenRoute()) {
    dismissModalAndOpenReportInInboxTab(activeReportID);
}

if (action === CONST.IOU.ACTION.SHARE) {
    if (isSearchTopmostFullScreenRoute() && activeReportID) {
        Navigation.setNavigationActionToMicrotaskQueue(() => {
            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: activeReportID}), {forceReplace: true});
        });
    }
    Navigation.setNavigationActionToMicrotaskQueue(() =>
        Navigation.navigate(ROUTES.ROOM_INVITE.getRoute(activeReportID, CONST.IOU.SHARE.ROLE.ACCOUNTANT))
    );
}

This ensures that when sharing an expense to an accountant from a search report, only the workspace chat (isInNarrowPaneModal is true) and RoomMembers_Invite screen are added to the navigation stack

• We also need to update the back navigation logic in:
  

  App/src/pages/RoomInvitePage.tsx

  Lines 217 to 220 in 1d2dda7

  	if (role === CONST.IOU.SHARE.ROLE.ACCOUNTANT) {
  	Navigation.dismissModalWithReport({reportID});
  	return;
  	}

if (role === CONST.IOU.SHARE.ROLE.ACCOUNTANT) {
    if (isSearchTopmostFullScreenRoute()) {
        Navigation.goBack();
        return;
    }
    Navigation.dismissModalWithReport({reportID});
    return;
}

This ensures that when pressing the back button on the room invite screen, the user is taken back to the workspace chat (isInNarrowPaneModal is true).

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

• N/A

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @shubham1206agra (External)

[melvin-bot]

@shubham1206agra Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[flaviadefaria]

@shubham1206agra, what do you think about @thelullabyy 's proposal?

[shubham1206agra]

@mkzie2 Why did you used REPORT_WITH_ID instead of SEARCH_REPORT in

App/src/libs/actions/IOU.ts

Lines 5462 to 5473 in c618014

	if (!params.isRetry) {
	dismissModalAndOpenReportInInboxTab(activeReportID);
	}
	if (action === CONST.IOU.ACTION.SHARE) {
	if (isSearchTopmostFullScreenRoute() && activeReportID) {
	Navigation.setNavigationActionToMicrotaskQueue(() => {
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(activeReportID), {forceReplace: true});
	});
	}
	Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.navigate(ROUTES.ROOM_INVITE.getRoute(activeReportID, CONST.IOU.SHARE.ROLE.ACCOUNTANT)));
	}

? Asking you since you authored #52304