[$250] Web-RHN-After creating a room, pressing back button navigates to room creation

[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: v9.1.31-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #60552
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Macbook/macOS 14.5
App Component: Chat Report View

Action Performed:

1. Open https://staging.new.expensify.com/
2. Click on green plus icon > Start chat
3. Click on room tab
4. Fill room name
5. Click on Create room
6. Click back button (Chrome browser back button)

Expected Result:

Should remain on room chat view

Actual Result:

Back to room creation view

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6809078_1745298472928.Recording__598.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021917320803136079906
• Upwork Job ID: 1917320803136079906
• Last Price Increase: 2025-05-13

Issue Owner

Current Issue Owner: @stitesExpensify

[melvin-bot]

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

[nkdengineer]

Proposal

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

Back to room creation view

What is the root cause of that problem?

We are using normal navigation and don't use forceReplace = true when scene don't have narrow layout

App/src/libs/Navigation/Navigation.ts

Lines 574 to 580 in a2b6087

	if (getIsNarrowLayout()) {
	const forceReplace = true;
	navigateToReportWithPolicyCheck(navigateToReportPayload, forceReplace);
	return;
	}
	dismissModal();
	navigateToReportWithPolicyCheck(navigateToReportPayload);

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

We should add forceReplace = true when navigating

        const forceReplace = true;
        if (getIsNarrowLayout()) {
            navigateToReportWithPolicyCheck(navigateToReportPayload, forceReplace);
            return;
        }
        dismissModal();
        navigateToReportWithPolicyCheck(navigateToReportPayload, forceReplace);

App/src/libs/Navigation/Navigation.ts

Lines 574 to 580 in a2b6087

	if (getIsNarrowLayout()) {
	const forceReplace = true;
	navigateToReportWithPolicyCheck(navigateToReportPayload, forceReplace);
	return;
	}
	dismissModal();
	navigateToReportWithPolicyCheck(navigateToReportPayload);

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)

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.

[ishakakkad]

Proposal

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

Web-RHN-After creating a room, pressing back button navigates to room creation

What is the root cause of that problem?

Modal route is available in the history because we are not replacing the route when modal dismiss.

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

• To replace the route we should pass the new param shouldReplace in dismissModalWithReport.

App/src/libs/Navigation/Navigation.ts

Line 565 in a2b6087

const dismissModalWithReport = (navigateToReportPayload: NavigateToReportWithPolicyCheckPayload, ref = navigationRef) => {

Because we are using dismissModalWithReport multiple places we should introduce new param so it will be backward compatible if some places we don't need to replace the route.

• And pass forceReplace in navigateToReportWithPolicyCheck.

App/src/libs/Navigation/Navigation.ts

Line 580 in a2b6087

navigateToReportWithPolicyCheck(navigateToReportPayload);

navigateToReportWithPolicyCheck(navigateToReportPayload, shouldReplace);

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

Test dismissModalWithReport to check route replace correctly.

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.

[bernhardoj]

Proposal

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

After creating a room, going back leads back to the create room page.

What is the root cause of that problem?

After creating the room, we navigate to the room using dismissModalWithReport.

App/src/libs/actions/Report.ts

Lines 2848 to 2849 in a2b6087

	API.write(WRITE_COMMANDS.ADD_WORKSPACE_ROOM, parameters, {optimisticData, successData, failureData});
	Navigation.dismissModalWithReport({report: policyReport});

We first call the dismissModal and then navigateToReportWithPolicyCheck.

App/src/libs/Navigation/Navigation.ts

Lines 579 to 580 in a2b6087

	dismissModal();
	navigateToReportWithPolicyCheck(navigateToReportPayload);

The problem here is that, dismissModal is delayed by a promise, so navigateToReportWithPolicyCheck is done first, and when dismissModal action is dispatched, the topmost modal isn't found anymore.

App/src/libs/Navigation/Navigation.ts

Lines 556 to 560 in a2b6087

	const dismissModal = (ref = navigationRef) => {
	isNavigationReady().then(() => {
	ref.dispatch({type: CONST.NAVIGATION.ACTION_TYPE.DISMISS_MODAL});
	});
	};

This is actually the same issue explained here, but the root cause isn't fixed.

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

We have 2 options.

Wrap the navigateToReportWithPolicyCheck with the isNavigationReady too.

OR

Update dismissModal to return the promise, then we can chain the navigateToReportWithPolicyCheck after the dismissModal promise is done.

const dismissModal = (ref = navigationRef) =>
    isNavigationReady().then(() => {
        ref.dispatch({type: CONST.NAVIGATION.ACTION_TYPE.DISMISS_MODAL});
    });

...

dismissModal().then(() => navigateToReportWithPolicyCheck(navigateToReportPayload));

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

N/A

[melvin-bot]

@johncschuster Still overdue 6 days?! Let's take care of this!

[melvin-bot]

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