[Due for payment 2026-05-07] Spend - Report carrousel disappears on approve

[izarutskaya]

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.64-23
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @JmillsExpensify
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

Prerequisites: Workspace with 2 employee

1. Go to https://staging.new.expensify.com/
2. Create several reports
3. Employee A and employee B submit to manager C expense
4. As manager C, go to the Spend page > Needs approval
5. Approve one report

Expected Result:

User should be able to navigate to the other reports for approval using report carrousel.

Actual Result:

Report carrousel disappears on approve page.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Recording.3730.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @daledah

[melvin-bot]

Triggered auto assignment to @chiragsalian (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #88714 - "Avoid mounting MoneyRequestReportNavigation when unnecessary" by @TMisiukiewicz (High confidence)
Related Issues: #79082 (previously fixed by #79132)

Recommendation: REVERT

PR #88714 introduced a SnapshotGuard that gates the MoneyRequestReportNavigation component on snapshotGuard.includesReport — a check that fails as soon as the current report is approved and removed from the search snapshot, causing the carousel to unmount immediately.

Assigned: @TMisiukiewicz (PR author), @abzokhattab @mountiny (approving reviewers)
Labels: DeployBlockerCash retained (frontend App PR caused the issue). No label changes made.

Detailed Analysis

Evidence

• The bug is staging-only (version 9.3.64-23), not reproducible on production.
• PR Avoid mounting MoneyRequestReportNavigation when unnecessary #88714 merged April 24, 2026 — within this staging window — and is the only PR in the staging deploy that touches MoneyRequestReportNavigation.tsx.
• This is a regression of an identical bug fixed by PR Fix report carousel disappearing after approve by skipping action filter #79132 ("Fix report carousel disappearing after approve by skipping action filter", merged Jan 12, 2026). That PR's description and QA steps describe exactly the same scenario: approver opens a report from Spend > Needs Approval, approves it, and the carousel should remain visible to navigate to the next report.

Verification

• Affected file: src/components/MoneyRequestReportView/MoneyRequestReportNavigation.tsx
• PR Avoid mounting MoneyRequestReportNavigation when unnecessary #88714 is confirmed to modify this exact file.
• PR Avoid mounting MoneyRequestReportNavigation when unnecessary #88714 is confirmed present in the StagingDeployCash checklist for release 9.3.64-23.

Root Cause

PR #88714 split MoneyRequestReportNavigation into an outer shell and an inner component. The outer shell added a shouldMount guard:

const shouldMount =
  isExpenseReportSearch &&
  snapshotGuard.hasMultiple &&
  snapshotGuard.includesReport;
if (!shouldMount) {
  return null;
}

snapshotGuard.includesReport is derived from buildSnapshotGuardSelector, which scans the raw Onyx snapshot for a key matching the current reportID. When the manager approves a report, the report changes state and is removed from the "Needs Approval" search snapshot. At that moment, includesReport becomes false, shouldMount becomes false, and the navigation component unmounts — making the carousel disappear.

The original MoneyRequestReportNavigation (before PR #88714) relied on currentIndex !== -1 from useSearchSections / allReports to decide whether to show the arrows. PR #79132 had intentionally bypassed action-based filtering so the report would remain in allReports temporarily after approval, keeping the carousel visible long enough to navigate away.

PR #88714's new snapshot-based guard short-circuits before useSearchSections is consulted, re-introducing the race condition that PR #79132 originally resolved.