[Awaiting checklist] [$125] Central pane changes from expense report to workspace chat after clicking outside hold or reject modal

[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: 9.2.58-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exp #74505
Email or phone of affected tester (no customers): sndiojdsoisjdiosd@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with new account.
3. Create a workspace.
4. Go to workspace chat.
5. Create an expense.
6. Open the expense report.
7. Click More > Hold.
8. Click outside hold educational modal (do not click Got it on the modal).

Expected Result:

Expense report will remain open in the background.

Actual Result:

Central pane changes from expense report to workspace chat after clicking outside educational modal.

The same issue happens when rejecting expense.

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

Bug7003490_1763101932206.14.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021993826779490999655
• Upwork Job ID: 1993826779490999655
• Last Price Increase: 2025-11-26
• Automatic offers:
• nyomanjyotisa | Contributor | 109629324

Issue Owner

Current Issue Owner: @eh2077

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Central pane changes from expense report to workspace chat after clicking outside hold modal

What is the root cause of that problem?

HoldOrRejectEducationalModal and HoldSubmitterEducationalModal are using FeatureTrainingModal with the default shouldGoBack={true}. When a user clicks outside the modal to close it (instead of clicking the "Got it" button), the closeModal is triggered from the onClose callback, which calls Navigation.goBack

App/src/components/HoldOrRejectEducationalModal.tsx

Lines 52 to 68 in e6b74e8

	return (
	<FeatureTrainingModal
	title={translate('iou.reject.educationalTitle')}
	description={translate('iou.reject.educationalText')}
	confirmText={translate('common.buttonConfirm')}
	image={Illustrations.ModalHoldOrReject}
	contentFitImage="cover"
	width={variables.holdEducationModalWidth}
	illustrationAspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}
	contentInnerContainerStyles={styles.mb5}
	modalInnerContainerStyle={styles.pt0}
	illustrationOuterContainerStyle={styles.p0}
	shouldCloseOnConfirm={false}
	onClose={onClose}
	onConfirm={onConfirm}
	>
	<>

App/src/components/HoldSubmitterEducationalModal.tsx

Lines 25 to 43 in e6b74e8

	return (
	<FeatureTrainingModal
	title={translate('iou.holdEducationalTitle')}
	description={translate('iou.whatIsHoldExplain')}
	confirmText={translate('common.buttonConfirm')}
	image={Illustrations.HoldExpense}
	contentFitImage="cover"
	width={variables.holdEducationModalWidth}
	illustrationAspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}
	contentInnerContainerStyles={styles.mb5}
	modalInnerContainerStyle={styles.pt0}
	illustrationOuterContainerStyle={styles.p0}
	onClose={onClose}
	onConfirm={onConfirm}
	shouldCloseOnConfirm={false}
	>
	<HoldMenuSectionList />
	</FeatureTrainingModal>
	);

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

Add shouldGoBack={false} to both HoldOrRejectEducationalModal and HoldSubmitterEducationalModal

App/src/components/HoldOrRejectEducationalModal.tsx

Lines 52 to 68 in e6b74e8

	return (
	<FeatureTrainingModal
	title={translate('iou.reject.educationalTitle')}
	description={translate('iou.reject.educationalText')}
	confirmText={translate('common.buttonConfirm')}
	image={Illustrations.ModalHoldOrReject}
	contentFitImage="cover"
	width={variables.holdEducationModalWidth}
	illustrationAspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}
	contentInnerContainerStyles={styles.mb5}
	modalInnerContainerStyle={styles.pt0}
	illustrationOuterContainerStyle={styles.p0}
	shouldCloseOnConfirm={false}
	onClose={onClose}
	onConfirm={onConfirm}
	>
	<>

App/src/components/HoldSubmitterEducationalModal.tsx

Lines 25 to 43 in e6b74e8

	return (
	<FeatureTrainingModal
	title={translate('iou.holdEducationalTitle')}
	description={translate('iou.whatIsHoldExplain')}
	confirmText={translate('common.buttonConfirm')}
	image={Illustrations.HoldExpense}
	contentFitImage="cover"
	width={variables.holdEducationModalWidth}
	illustrationAspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}
	contentInnerContainerStyles={styles.mb5}
	modalInnerContainerStyle={styles.pt0}
	illustrationOuterContainerStyle={styles.p0}
	onClose={onClose}
	onConfirm={onConfirm}
	shouldCloseOnConfirm={false}
	>
	<HoldMenuSectionList />
	</FeatureTrainingModal>
	);

What alternative solutions did you explore? (Optional)

None

[twisterdotcom]

Sorry, I haven't had time to test this myself yet.

[twisterdotcom]

Took me a while to get back to this, sorry I didn't prioritise it as this is niche. But this does happen reliably.

[melvin-bot]

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