[Due for payment 2025-12-10] [$250] Confirm details page blinks when import members with role column spreadsheet

[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.2.49
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/test-runs/TR-1932/folder/13177080/52085042/1008199620
Email or phone of affected tester (no customers): gocemate+b2155158@gmail.com
Issue reported by: Applause Internal Team
Device used: Lenovo 80ES / Windows 10 Pro
App Component: Other

Action Performed:

1. Create a Control Workspace
2. Go to Members
3. Import Spreadsheet with role column (File 1)
4. Complete the flow> Import
5. Click Got it on confirmation modal
6. Observe the RHP after clicking Got it

Expected Result:

RHP should not blink

Actual Result:

RHP blinks when click Got it on confirmation modal

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

Bug7000839_1762932768537!Member_1.xlsx

Bug7000839_1762883942451.Recording__6743.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021988607198310392971
• Upwork Job ID: 1988607198310392971
• Last Price Increase: 2025-11-12

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

RHP blinks when click Got it on confirmation modal

What is the root cause of that problem?

When the import modal appears on confirmation page, this also appears on ImportedMembersPage since isVisible is true here.

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

Line 202 in 82a45ab

isVisible={spreadsheet?.shouldFinalModalBeOpened && shouldShowConfirmModal}

Then when close the modal, it's also closed on ImportedMembersPage which triggers closeImportPageAndModal callback then the page is blinked

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

Add isFocused check here to not show the modal when the page is not focused. Or we can update the isFocused check inside ImportedMembersPage

const isFocused = useIsFocused();
isVisible={spreadsheet?.shouldFinalModalBeOpened && shouldShowConfirmModal && isFocused}

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

Line 202 in 82a45ab

isVisible={spreadsheet?.shouldFinalModalBeOpened && shouldShowConfirmModal}

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.

[Eskalifer1]

Proposal

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

Confirm details page blinks when import members with role column spreadsheet

What is the root cause of that problem?

When users dont have a role we redirect them to confirmation page here:

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

Lines 158 to 161 in 112cc07

	if (isRoleMissing) {
	setImportedSpreadsheetMemberData(allMembers);
	Navigation.navigate(ROUTES.WORKSPACE_MEMBERS_IMPORTED_CONFIRMATION.getRoute(policyID));
	} else {

But this page is not closed and here is modal:

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

Lines 201 to 208 in 112cc07

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

But on confirmation page we have the same modal:

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

Lines 207 to 210 in 112cc07

	<ImportSpreadsheetConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened}
	closeImportPageAndModal={closeImportPageAndModal}
	/>

With the same isVisible logic

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

I suspect that there is no other way to get to the confirmation page except from the import page, so we currently always have two modals, and I suggest simply removing the modal and all the logic associated with it on the confirmation page. This way, we will have only one modal responsible for display, and there will be no need to duplicate code and additional logic.

Remove this part:

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

Lines 207 to 210 in 112cc07

	<ImportSpreadsheetConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened}
	closeImportPageAndModal={closeImportPageAndModal}
	/>

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.

[melvin-bot]

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

[melvin-bot]

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

[shubham1206agra]

@nkdengineer's proposal looks good.

🎀 👀 🎀 C+ reviewed