[Due for payment 2025-09-17] [BACK BUTTON] [$250] mweb-workspace-After importing members, tapping device back button navigates to import page

[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.80-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/runs/view/37843&group_by=cases:section_id&group_order=asc&group_id=229065
Email or phone of affected tester (no customers): Slottwo1 zzzsxdddsqm@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings -members - more - import spreadsheet - upload members file
3. Tap got it
4. Tap device back button

Expected Result:

After importing members, tapping device back button must not navigate to import spreadsheet page.

Actual Result:

After importing members, tapping device back button navigates to import spreadsheet page.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6887077_1752475399944.Screenrecorder-2025-07-14-12-08-56-164.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021947236810483351282
• Upwork Job ID: 1947236810483351282
• Last Price Increase: 2025-07-21

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sonialiap

[melvin-bot]

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

[mitarachim]

reproducible in web (mac/chrome)

Screen.Recording.2025-07-14.at.3.02.02.PM.mov

[nkdengineer]

Proposal

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

After importing members, tapping device back button navigates to import spreadsheet page.

What is the root cause of that problem?

We are passing shouldHandleNavigationBack as true here

App/src/pages/workspace/members/ImportedMembersPage.tsx

Lines 129 to 138 in 7b004d7

	<ConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened}
	title={spreadsheet?.importFinalModal?.title ?? ''}
	prompt={spreadsheet?.importFinalModal?.prompt ?? ''}
	onConfirm={closeImportPageAndModal}
	onCancel={closeImportPageAndModal}
	confirmText={translate('common.buttonConfirm')}
	shouldShowCancelButton={false}
	shouldHandleNavigationBack
	/>

It'll update the navigation stacks here

App/src/components/Modal/index.tsx

Lines 50 to 53 in a05d34f

	if (shouldHandleNavigationBack) {
	window.history.pushState({shouldGoBack: true}, '', null);
	window.addEventListener('popstate', handlePopStateRef.current);
	}

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

We should remove shouldHandleNavigationBack prop

App/src/pages/workspace/members/ImportedMembersPage.tsx

Lines 129 to 138 in 7b004d7

	<ConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened}
	title={spreadsheet?.importFinalModal?.title ?? ''}
	prompt={spreadsheet?.importFinalModal?.prompt ?? ''}
	onConfirm={closeImportPageAndModal}
	onCancel={closeImportPageAndModal}
	confirmText={translate('common.buttonConfirm')}
	shouldShowCancelButton={false}
	shouldHandleNavigationBack
	/>

And do the same for other imported pages

Or if returning to import page is expected then we have to make it consistent across different pages by adding props shouldHandleNavigationBack like here

App/src/pages/workspace/perDiem/ImportedPerDiemPage.tsx

Lines 163 to 171 in 7b004d7

	<ConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened}
	title={spreadsheet?.importFinalModal?.title ?? ''}
	prompt={spreadsheet?.importFinalModal?.prompt ?? ''}
	onConfirm={closeImportPageAndModal}
	onCancel={closeImportPageAndModal}
	confirmText={translate('common.buttonConfirm')}
	shouldShowCancelButton={false}
	/>

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.

[dmkt9]

Proposal

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

After importing members, tapping device back button navigates to import page

What is the root cause of that problem?

1. When the import is successful, ConfirmModal appears:
   

   App/src/pages/workspace/members/ImportedMembersPage.tsx

   Lines 129 to 138 in ac272f5

   	<ConfirmModal
   	isVisible={spreadsheet?.shouldFinalModalBeOpened}
   	title={spreadsheet?.importFinalModal?.title ?? ''}
   	prompt={spreadsheet?.importFinalModal?.prompt ?? ''}
   	onConfirm={closeImportPageAndModal}
   	onCancel={closeImportPageAndModal}
   	confirmText={translate('common.buttonConfirm')}
   	shouldShowCancelButton={false}
   	shouldHandleNavigationBack
   	/>

2. And this modal has shouldHandleNavigationBack=true, so when it appears, it will push a new state into window.history:
   

   App/src/components/Modal/index.tsx

   Lines 34 to 40 in ac272f5

   	const showModal = () => {
   	if (shouldHandleNavigationBack) {
   	window.history.pushState({shouldGoBack: true}, '', null);
   	window.addEventListener('popstate', handlePopStateRef.current);
   	}
   	onModalShow?.();
   	};

3. When the user clicks on the "Got it" Button, it will be go back by Navigation.goBack in the confirm callback function, however, because the state above has not been popped, Navigation.goBack will not find the route to return to in rootState, so it will only replace the current route and the previous route will still exist in the navigation state. Therefore, when going back by tapping the device back button, it will return to the previous route:
   

   App/src/pages/workspace/members/ImportedMembersPage.tsx

   Lines 104 to 108 in ac272f5

   	const closeImportPageAndModal = () => {
   	setIsClosing(true);
   	setIsImporting(false);
   	Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID));
   	};

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

• Since the new state is only popped in onModalHide, we will only Navigate.goBack when the modal is completely hidden (similar to what we implemented for ReportDetailsPage):
  

  App/src/pages/workspace/members/ImportedMembersPage.tsx

  Lines 104 to 108 in ac272f5

  	const closeImportPageAndModal = () => {
  	setIsClosing(true);
  	setIsImporting(false);
  	Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID));
  	};

+ const [shouldShowConfirmModal, setShouldShowConfirmModal] = useState(true);

const closeImportPageAndModal = () => {
    setIsClosing(true);
    setIsImporting(false);
-   Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID));
+   setShouldShowConfirmModal(false);
};

App/src/pages/workspace/members/ImportedMembersPage.tsx

Lines 129 to 138 in ac272f5

	<ConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened}
	title={spreadsheet?.importFinalModal?.title ?? ''}
	prompt={spreadsheet?.importFinalModal?.prompt ?? ''}
	onConfirm={closeImportPageAndModal}
	onCancel={closeImportPageAndModal}
	confirmText={translate('common.buttonConfirm')}
	shouldShowCancelButton={false}
	shouldHandleNavigationBack
	/>

<ConfirmModal
    isVisible={spreadsheet?.shouldFinalModalBeOpened && shouldShowConfirmModal}
    title={spreadsheet?.importFinalModal?.title ?? ''}
    prompt={spreadsheet?.importFinalModal?.prompt ?? ''}
    onConfirm={closeImportPageAndModal}
    onCancel={closeImportPageAndModal}
    confirmText={translate('common.buttonConfirm')}
    shouldShowCancelButton={false}
    shouldHandleNavigationBack
    onModalHide={() => {
        InteractionManager.runAfterInteractions(() => Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)));
    }}
/>

• Why this works:
  • Because it keeps the desired flow of the application: navigate > push state > pop state > go back.
  • shouldHandleNavigationBack has the role of keeping the current route intact without going back when tapping the device back button while the modal is displayed. This solution still keeps its role so it will not cause navigation to an unwanted route.

NOTE: We should apply it to all ConfirmModal that have the same situation.

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

UI issue.

What alternative solutions did you explore? (Optional)

1. Option 1: In ConfirmModal, wrap onConfirm and onCancel with a function to check and remove the state with shouldGoBack=true before calling onConfirm and onCancel callback. Because in Modal, it will only go back if the state has shouldGoBack=true, so it will not go back twice:
   

   App/src/components/Modal/index.tsx

   Lines 23 to 28 in ac272f5

   	const hideModal = () => {
   	onModalHide();
   	if ((window.history.state as WindowState)?.shouldGoBack && shouldHandleNavigationBack) {
   	window.history.back();
   	}
   	};

2. Option 2: Check and remove state with shouldGoBack=true in Navigation.goBack.

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.

[melvin-bot]

@sonialiap Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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