[Due for Payment 2026-04-09][$250] Workspace-RHP does not close after importing members

[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.3.2-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13177080/test-cases/41237937
Email or phone of affected tester (no customers): agexptest+pr140126@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 11/ Chrome
App Component: Workspace Settings

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Go to any workspace settings > Members > More > Import spreadsheet
3. Select any valid CSV file that includes a few members
4. Click on Import
5. Click on Got it

Expected Result:

The RHP closes, and the user lands on the Members page.

Actual Result:

The RHP does not close after importing members. The "Import spreadsheet" panel keeps visible.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7049542_1768436429594!Members-3.csv

Bug7049542_1768436429608.RHP_issue.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022013064668826939201
• Upwork Job ID: 2013064668826939201
• Last Price Increase: 2026-03-16

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[annaweber830]

Proposal

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

After importing workspace members via “Import spreadsheet” and tapping Got it, the Right Hand Panel (RHP) does not close and the user remains stuck on the import flow instead of returning to the Members page.

What is the root cause of that problem?

The “Got it” handler was attempting to navigate with Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)), which does not actually dismiss the RHP modal stack in this flow. As a result, the import route remains visible in the RHP.

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

Update the “Got it” flow (after the final confirmation modal hides) to dismiss the RHP modal using the appropriate navigation dismissal method, rather than trying to goBack() to the Members route.
Ensure the import cleanup is still performed (via existing unmount cleanup) so the flow exits cleanly.

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

Lines 202 to 205 in 8f123f4

	onModalHide={() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)));
	}}

onModalHide={() => {
                    // eslint-disable-next-line @typescript-eslint/no-deprecated
                    InteractionManager.runAfterInteractions(() => Navigation.dismissModal());
                }}

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

Line 92 in 8f123f4

const closeImportPageAndModal = () => {

const closeImportPageAndModal = () => {
        setIsClosing(true);
        setIsImporting(false);
    };

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

Lines 208 to 211 in 8f123f4

	onModalHide={() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)));
	}}

onModalHide={() => {
                    // eslint-disable-next-line @typescript-eslint/no-deprecated
                    InteractionManager.runAfterInteractions(() => Navigation.dismissModal());
                }}

What alternative solutions did you explore? (Optional)

[daledah]

Proposal

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

After importing members via spreadsheet in workspace settings (Members > More > Import spreadsheet), clicking "Got it" on the confirmation modal does not close the RHP (Right Hand Panel). The "Import spreadsheet" panel remains visible instead of navigating back to the Members page.

What is the root cause of that problem?

The root cause is in ImportedMembersPage.tsx. The closeImportPageAndModal function does NOT call Navigation.goBack() directly, unlike similar import pages (ImportedCategoriesPage and ImportedTagsPage).

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

Lines 174 to 178 in 476358b

	const closeImportPageAndModal = () => {
	setIsClosing(true);
	setIsImporting(false);
	setShouldShowConfirmModal(false);
	};

It relies on onModalHide callback to navigate back:

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

Lines 202 to 205 in 476358b

	onModalHide={() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)));
	}}

App/src/pages/workspace/categories/ImportedCategoriesPage.tsx

Lines 131 to 135 in 476358b

	const closeImportPageAndModal = () => {
	setIsClosing(true);
	setIsImportingCategories(false);
	Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(policyID, backTo) : ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID));
	};

The issue is that onModalHide might not be called properly when using shouldHandleNavigationBack={true} (the default), causing the navigation to not execute.

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

Update ImportedMembersPage.tsx to be consistent with ImportedCategoriesPage and ImportedTagsPage:

1. Call Navigation.goBack() directly inside closeImportPageAndModal
2. Remove the onModalHide callback that handles navigation

Code changes:

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

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

// ...

<ImportSpreadsheetConfirmModal
    sVisible={spreadsheet?.shouldFinalModalBeOpened && shouldShowConfirmModal && isFocused}
    closeImportPageAndModal={closeImportPageAndModal}
-   onModalHide={() => {
-       // eslint-disable-next-line @typescript-eslint/no-deprecated
-       InteractionManager.runAfterInteractions(() => Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)));
-   }}
/>

Optional: we can remove shouldShowConfirmModal state

What alternative solutions did you explore? (Optional)

Or we can pass the shouldHandleNavigationBack as false to ImportSpreadsheetConfirmModal

[nkdengineer]

Proposal

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

The RHP does not close after importing members. The "Import spreadsheet" panel keeps visible.

What is the root cause of that problem?

onModalHide is called before window.history.back(); so if we handle navigation on onModalHide callback, it can cause the unexpected behavior since with shouldHandleNavigationBack={true} we should complete window.history.back() first

App/src/components/Modal/index.tsx

Lines 23 to 28 in fb1e667

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

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

We should call window.history.back() first before calling onModalHide

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

App/src/components/Modal/index.tsx

Lines 23 to 28 in fb1e667

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

Optional: To ensure window.history.back() is done first we can also wrap onModalHide with setTimeout 0ms

What alternative solutions did you explore? (Optional)

N/A

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]

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

[melvin-bot]

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