Navigate to the clicked expense in a multi-expense report preview by wildan-m · Pull Request #92546 · Expensify/App

wildan-m · 2026-06-03T15:42:14Z

Explanation of Change

In a multi-expense report preview — the carousel shown in chat when a report has more than one expense — clicking any expense card opens the parent report instead of the expense that was clicked. Every card is wired to the same report-level press handler, so the specific expense a user taps is ignored even though it is already known when each card is built.

Each card now opens its own expense instead. On wide layouts the expense opens in the right-hand pane; on narrow layouts the report is pushed first and the expense on top of it, so going back returns to the report rather than straight to the chat. If a card's expense thread hasn't been created yet it is created on the fly so the tap never lands on a dead route, falling back to the parent report only when neither is possible. A grey "View" button is now always present in the preview's action row so the parent report stays reachable alongside whatever primary action (Submit, Approve, Pay, and so on) the report currently shows.

Fixed Issues

$ #91042
PROPOSAL: #91042 (comment)

Tests

Open a workspace chat that contains an expense report with more than one expense, shown in chat as the multi-expense report preview. (To set one up: create a workspace and submit two expenses to it so they group into a single report.)
Confirm the preview shows a horizontal carousel with one card per expense, and that a grey "View" button is shown next to the primary action button (e.g. Submit).
Click the first expense card. Verify it opens that specific expense (its merchant and amount match the card), not the parent report.
Go back to the chat and click a different expense card. Verify it opens that other expense (different merchant/amount) — i.e. each card opens its own expense.
On a narrow layout (mobile/mWeb), click an expense card and verify it opens that expense; press back once and verify you land on the report, not directly on the chat.
Click the grey "View" button in the preview and verify it opens the parent report.
Verify that no errors appear in the JS console.

Offline tests

Same as Tests, performed with the network connection turned off. Opening an expense whose thread already exists is pure navigation and works offline. Opening one whose thread has not been created yet reuses the existing optimistic thread-creation flow (the same one used when opening a standalone expense in chat), so it also works offline.

QA Steps

Same as Tests.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Kapture.2026-06-07.at.13.51.00.mp4

Android: mWeb Chrome

Kapture.2026-06-07.at.13.53.22.mp4

iOS: Native

Kapture.2026-06-07.at.13.35.26.mp4

iOS: mWeb Safari

Kapture.2026-06-07.at.13.44.08.mp4

MacOS: Chrome / Safari

Kapture.2026-06-07.at.09.01.47.mp4

…s show grey View button

…expense-preview-per-item-nav # Conflicts: # src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

…expense-preview-per-item-nav

codecov · 2026-06-03T15:52:07Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
...RequestReportPreview/ReportPreviewActionButton.tsx	`100.00% <100.00%> (ø)`
...portActionItem/MoneyRequestReportPreview/index.tsx	`94.54% <93.22%> (+2.23%)`	⬆️
src/libs/Navigation/Navigation.ts	`43.61% <0.00%> (-1.88%)`	⬇️
... and 17 files with indirect coverage changes

…expense-preview-per-item-nav

melvin-bot · 2026-06-07T06:58:39Z

@jayeshmangwani Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

github-actions · 2026-06-08T06:40:59Z

🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here.

shawnborton · 2026-06-08T08:40:01Z

Hmm I thought we wanted to open up the expense with the report below it? cc @mountiny

Right now it seems like we only open up the expense in the RHP, and not the report with the expense open.

shawnborton · 2026-06-08T08:41:13Z

For single expense reports like this, we should just still continue to open up the report view:

Otherwise you get this odd behavior:

CleanShot.2026-06-08.at.10.40.55.mp4

mountiny · 2026-06-08T09:07:33Z

Yep that was the idea to open both the multiexpense and over that the report detail so basically push both

jayeshmangwani · 2026-06-08T11:41:48Z

@wildan-m , we can see both buttons here. If there's only a single report, I don't think we should display the View button.

when a single expense report is pressed, can we keep the current behavior and open EXPENSE_REPORT_RHP instead of navigating to SEARCH_ROOT?

staging-behavior-ve-PR-behavior.mov

shawnborton · 2026-06-08T14:29:18Z

we can see both buttons here. If there's only a single report, I don't think we should display the View button.

I think it's probably fine to show both buttons in that case - I thought we basically always wanted to show both buttons, so that all cases had at least a View button as well? cc @Expensify/design

dannymcclain · 2026-06-08T15:04:41Z

I think it's probably fine to show both buttons in that case - I thought we basically always wanted to show both buttons, so that all cases had at least a View button as well? cc @Expensify/design

Agree!

dubielzyk-expensify · 2026-06-09T00:15:10Z

Yeah same. I agree with that. Looks fine to me 👍

…expense-preview-per-item-nav

…n just the report

…expense-preview-per-item-nav

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5ab372717c

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-06T07:13:37Z

+                    setTimeout(() => {
+                        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));


Cancel delayed expense navigation after dismissal

When a user taps an expense on a wide layout and then quickly closes the just-opened report RHP or navigates elsewhere before this 180 ms timer fires, the delayed callback still runs with the stale reportRoute and opens the expense over whatever screen is active. This can unexpectedly reopen an expense after the user backed out; guard that the active route is still the report route (or cancel the timeout when the flow is dismissed) before navigating.

Useful? React with 👍 / 👎.

Good catch — fixed in 13e582f4666. The wide-branch cascade now guards the delayed navigate on Navigation.isActiveRoute(reportRoute), so if the report's wide RHP is closed (or the user navigates away) during the 180ms delay, the pressed expense no longer reopens over the active screen. Added a regression test for the dismissal case.

trjExpensify · 2026-07-06T12:53:48Z

Bump @jayeshmangwani, whats your ETA to complete the review?

jayeshmangwani · 2026-07-06T13:45:14Z

@trjExpensify , I tested the PR again, and it looks good overall. I only have one small comment, which I've added below along with the steps to reproduce.

jayeshmangwani · 2026-07-06T13:46:05Z

@wildan-m, the PR works well overall. I only found a small issue on Mobile Web (Chrome and Safari).

Steps to reproduce:

Open the app in Mobile Web Chrome or Mobile Web Safari.
Tap an expense card in the carousel.
It navigates to the individual expense.
Press the native back button on Android Chrome, or the browser back button in Mobile Web Safari.

Bug:
Nothing happens on the first back press. It only navigates back to the carousel page on the second press.

mweb-safari.mov

Untitled.mov

On web, react-navigation mirrors every split-stack entry into window.history and decides push-vs-replace from the stack length, not the URL. openExpenseOverParentReport's reset (splicing the parent report beneath the expense) grows the split stack by one route, which the web history sync treats as a forward push — a second history entry for the same, unchanged expense URL. That dead entry made the first browser/OS back a no-op on mobile web (Android Chrome + iOS Safari), reaching the carousel only on the second press. Guarding the splice with getPlatform() === WEB and returning early keeps just the expense push on web, so one back returns to the chat while the expense's backTo still drives the header back as expense -> report -> chat. Native (react-native-screens) is unaffected and keeps the single-forward-slide splice. Verified on the Android emulator (mobile web).

…expense-preview-per-item-nav # Conflicts: # src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

…agree The earlier web guard skipped the parent-report splice to fix the mobile-web double-back, but that left the report out of window.history — so the browser/OS (hard) back skipped straight to the chat while the header back (driven by the expense's backTo) still stepped through the report, an inconsistency. On web, push the report and then the expense as two distinct history entries (different URLs) instead: both the browser/OS back and the header back now step expense -> report -> chat with no dead entry (distinct URLs, unlike the splice's duplicate). Native keeps the single-forward-slide splice unchanged.

The previous web path pushed the parent report then the expense as two split REPORT screens, leaving the report a rendered-but-frozen screen under the expense (freezeNonTopScreens), frozen ~1 frame after mount (mid-load, since the expense push is deferred). Hard-backing to it thawed it into a re-render burst, and a transaction-row tap during that burst had its pointerdown/click straddle a row DOM swap, cancelling the click — so the first tap was dropped (needing a second). On web, open the parent report as the top of the split (never frozen) and open the pressed expense in the RHP over it — exactly like the report view and the wide layout. Browser/OS back and the header back both close the RHP to the fully-loaded report, then to the chat (consistent, no dead entry — the RHP is a distinct URL). Native keeps the single-forward-slide splice (openExpenseOverParentReport is now native-only).

…scade) The web path deferred the expense RHP behind setActiveTransactionIDs().then(), so the parent report rendered full-screen for a tick before the expense opened over it — the same report-then-expense cascade/delay as the wide layout. Open the report (top of the split) and the expense RHP synchronously in one tick so the RHP covers the report immediately with no flash; the expense mark + active transaction IDs are seeded fire-and-forget. Back still closes the RHP to the unfrozen report, then to the chat.

…port Opening the report and the expense RHP in the same tick removed the open-flash but dropped the report from browser history (not a distinct state change), so back skipped it. Defer the RHP one frame via setNavigationActionToMicrotaskQueue: the report lands as its own history entry (hard and header back both stop on it, then the chat), and one frame keeps the report barely visible before the full-screen RHP covers it — far shorter than the earlier setActiveTransactionIDs().then cascade. Report stays top-of-split (unfrozen), so the first-tap fix holds.

jayeshmangwani · 2026-07-08T11:32:14Z

@wildan-m , once we fix the issue above and you've tested it all again, please ping me for a re-review.

trjExpensify · 2026-07-08T22:44:39Z

@wildan-m are you ready for re-review here?

…expense-preview-per-item-nav

trjExpensify · 2026-07-13T13:13:40Z

bump @wildan-m

…expense-preview-per-item-nav

On narrow the RHP is always full-screen and the expense screen never reads the width hint, so markReportRHPWidth(_, 'wide') was inert in the narrow-web branch — it only forced a WideRHP context-wide re-render mid-transition and left a stale 'wide' hint for a later wide visit. Removing it trims that jank; the report-first history defer (and thus back -> report -> chat) is unchanged.

wildan-m · 2026-07-14T06:20:20Z

@trjExpensify need more time to test, this hard button edge case create regression

…expense-preview-per-item-nav

This PR renders the View button alongside the primary action button (Export/Submit/Approve/Pay) instead of in place of it. Main added ReportPreviewActionButtonTest after this branch, asserting the old primary-OR-View behavior, so the EXPORT_TO_ACCOUNTING-with-integration case expected View not to render. Update it to expect View, matching the new layout.

Codex flagged that navigateToExpense's wide branch fires the pressed-expense navigate on a 180ms cascade timer even if the user closed the report's wide RHP or navigated away during the delay — reopening the expense over whatever screen is now active. Guard the delayed navigate on Navigation.isActiveRoute(reportRoute) so it only fires while the report is still active, and add a regression test for the dismissal case.

…fari freeze) On iOS Safari mobile web, tapping an expense card right after a hard reload often froze the app. The narrow-web path pushes the report (a split screen) then opens the expense RHP one frame later; opening the RHP suspends the whole ReportsSplitNavigator via react-freeze, and suspending the report while it is still hydrating (cold Onyx cache after a reload) wedges React concurrent rendering on WebKit. Defer the expense RHP an extra requestAnimationFrame so the report commits and paints before the freeze lands, and guard on isActiveRoute so it bails if the user navigated away. Native and desktop are unaffected (native FreezeWrapper is a no-op; the wide path already settles via a 180ms cascade).

…eeze) Pushing the parent report as a split screen first (so back stops on it) then opening the expense RHP over it mounts a fresh, still-hydrating report and suspends it via react-freeze when the RHP opens, wedging React concurrent rendering on iOS Safari (freeze on cold reload; no frame/timeout reliably outruns the hydration). Open the expense directly in the RHP over the already-settled chat instead: no churning report to suspend, so no freeze — and no report-first flash. Trade-off: on mobile web, back now returns to the chat rather than stopping on the report first (native still does report -> chat via openExpenseOverParentReport).

wildan-m · 2026-07-15T13:09:43Z

Mobile-web navigation trade-off — iOS Safari freeze

While testing per-item navigation on mobile web I hit an intermittent freeze/hang on iOS Safari: tapping an expense card in the preview carousel right after a hard reload would often lock up the app.

Root cause: the mobile-web path pushed the parent report (a split screen), then opened the pressed expense in the RHP one frame later. Opening the RHP suspends the entire ReportsSplitNavigator via react-freeze, and suspending the report while it's still hydrating (cold Onyx cache right after a reload) wedges React 19 concurrent rendering on WebKit. It's specific to Safari + web + cold-reload — native's FreezeWrapper is a no-op passthrough, and the wide layout settles via its 180ms cascade first. Deferring the RHP by a frame or two didn't help; nothing reliably outruns a cold hydration.

Change (ebbf494511a): on mobile web, open the pressed expense directly in the RHP over the chat (already settled, so there's no churning subtree for react-freeze to suspend). This removes the freeze — and as a bonus removes the brief report-flash the report-first approach caused.

Trade-off: on mobile web, back now returns to the chat instead of stopping on the report first. Native still does report → chat (it splices the parent report underneath the expense without foregrounding it, so it never freezes). Desktop/wide are unaffected (report opens in the wide RHP alongside the expense).

@jayeshmangwani @heyjennahay @trjExpensify — is "back → chat on mobile web" acceptable, or should we preserve back → report there too? The only way I see is making the shared FreezeWrapper keep the report alive under a full-screen RHP (mirroring native) instead of freezing it mid-hydration — but that touches nav infra used by every split screen and is sensitive to the async modal-visibility timing, so I'd want to be careful. Open to other suggestions.

trjExpensify · 2026-07-15T14:06:59Z

Mhm, @shawnborton on narrow screens do we actually want back to go the report in this case? 🤔 I have a feeling that might be a bit unexpected.

Go to the workspace chat
Click on an expense in the preview
Click back from the expense
Navigates to the expense report
Have to click back again to get to the chat where you came from

…expense-preview-per-item-nav

wildan-m · 2026-07-16T00:50:03Z

@jayeshmangwani — heads up this touches the shared FreezeWrapper (used by every split navigator + Search), so there's some regression risk beyond this PR's own flows. I'm doing a regression pass on my end in the meantime — could you help check potential regression too? 🙏

Open the pressed expense over the parent report (report-first) on mobile web instead of over the chat, and stop the shared FreezeWrapper from freezing a split while a full-screen RHP is open over it — detected synchronously from the navigation state, closing the async lag in the Onyx MODAL guard. This avoids suspending the report mid-hydration (which wedged React 19 concurrent rendering on iOS Safari — the freeze) and leaves it underneath as a live history entry, so back goes report -> chat, matching native.

wildan-m added 4 commits May 19, 2026 15:18

Navigate to clicked expense in multi-expense report preview and alway…

866d0b6

…s show grey View button

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

92f1af9

…expense-preview-per-item-nav # Conflicts: # src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

9f55fd6

…expense-preview-per-item-nav

Add unit tests for multi-expense preview transaction navigation

d3d086e

melvin-bot Bot assigned wildan-m Jun 3, 2026

wildan-m added 3 commits June 6, 2026 05:56

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

cab5457

…expense-preview-per-item-nav

Merge remote-tracking branch 'upstream/main' into HEAD

89b62ed

Show the primary action before the View button in the report preview

5eaa24e

wildan-m marked this pull request as ready for review June 7, 2026 06:58

wildan-m requested review from a team as code owners June 7, 2026 06:58

melvin-bot Bot requested review from heyjennahay and jayeshmangwani and removed request for a team June 7, 2026 06:58

melvin-bot Bot removed the request for review from a team June 7, 2026 06:58

wildan-m mentioned this pull request Jun 7, 2026

[CFI] [$250] Make clicking on an expense in a multi expense report preview take you to the expense you clicked #91042

Open

This comment has been minimized.

Sign in to view

wildan-m added 3 commits June 9, 2026 08:43

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

0ead53d

…expense-preview-per-item-nav

Open the report below the pressed expense; single-expense reports ope…

e46b769

…n just the report

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

e408854

…expense-preview-per-item-nav

chatgpt-codex-connector Bot reviewed Jul 6, 2026

View reviewed changes

wildan-m added 6 commits July 6, 2026 21:59

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

5bdf3b0

…expense-preview-per-item-nav # Conflicts: # src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

eef7176

…expense-preview-per-item-nav

wildan-m added 3 commits July 13, 2026 23:00

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

9ddff97

…expense-preview-per-item-nav

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

9ca40b5

…expense-preview-per-item-nav

wildan-m added 3 commits July 14, 2026 17:04

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

3c5ad11

…expense-preview-per-item-nav

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

68444dd

…expense-preview-per-item-nav

wildan-m force-pushed the wildan/91042-multi-expense-preview-per-item-nav branch from 6d35525 to 764bbfe Compare July 15, 2026 06:53

wildan-m added 3 commits July 15, 2026 15:00

Merge remote-tracking branch 'upstream/main' into wildan/91042-multi-…

ed5c45d

…expense-preview-per-item-nav

		setTimeout(() => {
		Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));

Uh oh!

Conversation

wildan-m commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Jun 3, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot Bot commented Jun 7, 2026

Uh oh!

github-actions Bot commented Jun 8, 2026

Uh oh!

This comment has been minimized.

shawnborton commented Jun 8, 2026

Uh oh!

shawnborton commented Jun 8, 2026

Uh oh!

mountiny commented Jun 8, 2026

Uh oh!

jayeshmangwani commented Jun 8, 2026

Uh oh!

shawnborton commented Jun 8, 2026

Uh oh!

dannymcclain commented Jun 8, 2026

Uh oh!

dubielzyk-expensify commented Jun 9, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 6, 2026

Choose a reason for hiding this comment

Uh oh!

wildan-m Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

trjExpensify commented Jul 6, 2026

Uh oh!

jayeshmangwani commented Jul 6, 2026

Uh oh!

jayeshmangwani commented Jul 6, 2026

Uh oh!

jayeshmangwani commented Jul 8, 2026

Uh oh!

trjExpensify commented Jul 8, 2026

Uh oh!

trjExpensify commented Jul 13, 2026

Uh oh!

wildan-m commented Jul 14, 2026

Uh oh!

wildan-m commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

trjExpensify commented Jul 15, 2026

Uh oh!

wildan-m commented Jul 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

wildan-m commented Jun 3, 2026 •

edited

Loading

codecov Bot commented Jun 3, 2026 •

edited by github-actions Bot

Loading

wildan-m commented Jul 15, 2026 •

edited

Loading