Expense - Expense report RHP animates expectedly when expense flow RHP opens

[applause-bot]

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.3.74-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #87920
Email or phone of affected tester (no customers): sdsdjoijdoisnjodis@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Run Onyx.merge('betas', ['newManualExpenseFlow']); in console.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create two expenses.
4. Open the report.
5. Click + > Create expense.

Expected Result:

Expense report RHP will not animate when expense flow RHP opens.

Actual Result:

Expense report RHP animates expectedly when expense flow RHP opens.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7153956_1778758988829.14.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Nathan Lemma
Bug ID: 7153956

Issue Owner

Current Issue Owner: @ShridharGoel

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/9a09653ea8960d7ce9a5290049734b8ce25819018328be9151b8abc0d0add246

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #87920

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Proposal

What is the root cause of that problem?

PR #87920 embeds IOURequestStepConfirmation directly inside IOURequestStartPage when the newManualExpenseFlow beta is enabled (IOURequestStartPage.tsx:251-256). This causes a preInsertFullscreenUnderRHP effect (IOURequestStepConfirmation.tsx:443-509) to evaluate immediately when the create-expense RHP opens—rather than later when the user would have navigated to a separate confirmation step.

The isReportOpenInRHP guard at line 467 only inspects the last route in the root navigation state (isReportOpenInRHP.ts:7). When the money-request RHP has been pushed on top of the expense-report RHP, the last route is the money-request navigator—so isReportOpenInRHP returns false, the guard passes, and preInsertFullscreenUnderRHP fires. This dispatches DISABLE_RHP_ANIMATION / RESTORE_RHP_ANIMATION events (RightModalNavigator.tsx:122-127), toggling the RHP animation from NONE → SLIDE_FROM_RIGHT and causing the expense-report RHP to visibly slide/animate when it shouldn't.

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

Skip the preInsertFullscreenUnderRHP effect entirely when IOURequestStepConfirmation is rendered in embedded mode (i.e., when shouldHideHeader is true). The pre-insert logic exists for the standalone confirmation screen that will dismiss back to a fullscreen route—when the confirmation is embedded inside IOURequestStartPage within the RHP, the pre-insert is never needed and actively harmful.

Add shouldHideHeader as an early return guard in the effect at IOURequestStepConfirmation.tsx:444:

if (hasPreInsertFired.current || !isTransactionReady || !getIsNarrowLayout() || shouldHideHeader) {
    return;
}

This is the minimal change: it prevents the pre-insert from firing when the component is embedded, without modifying the standalone flow at all.

What alternative solutions did you explore? (Optional)

An alternative would be to fix isReportOpenInRHP to scan all routes in the root state (not just the last one) for wide RHP screens. This would make the existing guard catch the case correctly, but it changes the semantics of isReportOpenInRHP globally and could have unintended side effects in other call sites. The shouldHideHeader guard is more targeted and safer.

Investigation details

Navigation flow during repro:

1. User opens expense report → RIGHT_MODAL_NAVIGATOR with EXPENSE_REPORT screen is on the root stack
2. User taps "+ Create expense" → linkTo pushes a NEW RIGHT_MODAL_NAVIGATOR with MONEY_REQUEST on the root stack
3. IOURequestStartPage mounts with IOURequestStepConfirmation embedded (beta enabled)
4. The pre-insert effect evaluates: isReportOpenInRHP checks only state.routes.at(-1) which is the NEW money-request RHP → returns false → isOutsideRHP = true
5. shouldPreInsertReport evaluates to true → preInsertFullscreenUnderRHP fires after a delay
6. This emits DISABLE_RHP_ANIMATION, then on cleanup emits RESTORE_RHP_ANIMATION which sets animation to SLIDE_FROM_RIGHT
7. The expense report RHP underneath visibly animates

Key code references:

• Embedding: IOURequestStartPage.tsx:251-256
• Pre-insert effect: IOURequestStepConfirmation.tsx:443-509
• Guard that fails: isReportOpenInRHP.ts:6-18
• Animation toggle: RightModalNavigator.tsx:118-132

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.