[Paid] [$250] [Held requests] Back button on expense report reopens same report after returning from Hold page

[lanitochka17]

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.0.19-2
Reproducible in staging?: Y
Reproducible in production?: Y
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): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app
2. Go to workspace chat
3. Submit two expenses
4. Go to expense report
5. Long tap on the expense preview
6. Select Hold
7. Tap Back button
8. Tap Back button again

Expected Result:

App will return to main chat when tapping back button on expense report after returning from hold expense page

Actual Result:

App returns to the same expense report when tapping back button on expense report after returning from hold expense page

Workaround:

Unknown

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

Bug6570155_1723482155692.ScreenRecording_08-13-2024_00-56-55_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cb01ad1f22f574aa
• Upwork Job ID: 1823810865100514650
• Last Price Increase: 2024-08-14
• Automatic offers:
• ZhenjaHorbach | Reviewer | 103543616
• nkdengineer | Contributor | 103543617

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[melvin-bot]

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

[lanitochka17]

@OfstadC FYI 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

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2024-08-12 20:11:40 UTC.

Proposal

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

Back button on expense report reopens same report after returning from Hold page

What is the root cause of that problem?

We are passing a fallbackroute here backTo. This is the problem

App/src/pages/iou/HoldReasonFormView.tsx

Line 42 in 5d57ae8

onBackButtonPress={() => Navigation.goBack(backTo)}

When we press back button. This condition becomes true so instead of going back we are adding a route in the navigator

App/src/libs/Navigation/Navigation.ts

Lines 222 to 225 in 8ddece2

	if (shouldEnforceFallback || (isFirstRouteInNavigator && fallbackRoute)) {
	navigate(fallbackRoute, CONST.NAVIGATION.TYPE.UP);
	return;
	}

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

Remove the backTo from here

App/src/pages/iou/HoldReasonFormView.tsx

Line 42 in 5d57ae8

onBackButtonPress={() => Navigation.goBack(backTo)}

We should also handle the cleanup after removing backTo.

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

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

App returns to the same expense report when tapping back button on expense report after returning from hold expense page

What is the root cause of that problem?

We navigate back to the backTo param when clicking on the back button

App/src/pages/iou/HoldReasonFormView.tsx

Line 42 in 9819f37

onBackButtonPress={() => Navigation.goBack(backTo)}

Then since it's the first screen in RHP, we navigate with type as UP

App/src/libs/Navigation/Navigation.ts

Lines 222 to 224 in 9819f37

	if (shouldEnforceFallback || (isFirstRouteInNavigator && fallbackRoute)) {
	navigate(fallbackRoute, CONST.NAVIGATION.TYPE.UP);
	return;

When we are on the hold reason page the stack navigator is Bottom tab bar --> Chat report --> Expense report --> Hold reason page, and here the action type is REPLACE since we pass the type as UP. So the navigation will replace the last route with the target report which is the expense report and now the stack navigator becomes Bottom tab bar --> Chat report --> Expense report --> Expense report.

App/src/libs/Navigation/linkTo/index.ts

Lines 125 to 127 in 9819f37

	} else if (type === CONST.NAVIGATION.TYPE.UP) {
	action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE;

That is the reason the expense report displays twice when we click on the back button after opening the hold reason page

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

Since the hold reason page can be opened from the expense report via context menu action or transaction thread report via the report detail page, we should keep the backTo param and fix this issue.

To fix this issue, we should check here if the top center panel is the target screen and the last route is the side navigator we will dismiss the modal and return early otherwise update action.type to REPLACE to replace the current route with the target screen.

if (type === CONST.NAVIGATION.TYPE.UP) {
    if (!areParamsDifferent && isSideModalNavigator(lastRoute?.name) && topmostCentralPaneRoute?.name === targetName) {
        dismissModal(navigation);
        return;
    }
    action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE;
}

App/src/libs/Navigation/linkTo/index.ts

Lines 125 to 127 in 9819f37

	} else if (type === CONST.NAVIGATION.TYPE.UP) {
	action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE;

What alternative solutions did you explore? (Optional)

[OfstadC]

Was able to reproduce

If selected twice, it goes back to chat, but first "back" shows the same report.

[melvin-bot]

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