[Due for payment 2026-05-29] [$250] Report - Carousel is autoscrolled but new expense not highlighted if created via FAB.

[jponikarchuk]

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.27.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: #81446
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Motorola MotoG60 / Android 12 (Hybrid app)
App Component: Money Requests

Action Performed:

Prerequisite: Account has at least one workspace.

1. Open the Expensify app.
2. Open any workspace chat.
3. Create two manual expenses.
4. Note that when second expense is created, carousel on preview is autoscrolled to the new expense and it is highlighted.
5. Navigate to "Inbox"
6. Create a new manual expense via "FAB" and submit it to the same report and workspace.
7. Note that carousel is autoscrolled, but expense is not highlighted.

Expected Result:

When new expenses are created, report preview carousel should be autoscrolled to the last expense and new one should be highlighted.

Actual Result:

When a new expense is created via "FAB", report carousel is autoscrolled, but new expense is not displayed highlighted.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022027496122516739932
• Upwork Job ID: 2027496122516739932
• Last Price Increase: 2026-05-23

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[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: #81446 - "Fix - Make it more apparent in the expense chat carousel view when expenses are added to a report" by @FitseTLT (High confidence)
Related Issues: Original feature request #71390, #78526

Recommendation: ROLL FORWARD

The PR introduces new functionality to highlight newly created expenses in the report preview carousel. The bug appears to be related to screen focus detection when creating expenses via FAB and returning to the report. A roll forward fix would be simpler than reverting, as reverting would remove the entire highlighting feature that works correctly in other scenarios (e.g., when creating expenses directly in the chat).

Labels: No label changes. This is a frontend bug in staging, so DeployBlockerCash should remain.

📋 Detailed Analysis

Evidence

PR #81446 introduced logic to highlight newly created expenses and auto-scroll to them in the carousel. The implementation uses:

1. useNewTransactions hook to detect new transactions
2. useIsFocused() to check if the screen is focused
3. Conditional logic: const newTransactionIDs = isFocused ? new Set(newTransactions.map(...)) : undefined

The bug manifests when:

• Creating an expense via FAB (step 6 in reproduction)
• Submitting to the same report
• The carousel auto-scrolls but the expense is NOT highlighted

Verification

The PR modifies these key files:

• src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx - Added focus detection and newTransactionIDs logic
• src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx - Added useFocusEffect for auto-scrolling
• src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx - Added highlight animation
• src/hooks/useNewTransactions.ts - Modified dependency array

All changes are in App repository, confirming this is a frontend issue.

Root Cause

The bug likely occurs because of a timing/race condition between:

1. When the expense is created via FAB
2. When the user navigates back to the report
3. When isFocused becomes true
4. When useNewTransactions calculates the new transactions

The auto-scroll works (line 507 in MoneyRequestReportPreviewContent.tsx), but the highlight does not appear because isFocused might not be true at the right moment, causing newTransactionIDs to be undefined when passed to the TransactionPreview component (line 148 in index.tsx).

Alternatively, there may be a difference in how useNewTransactions tracks transactions when navigating away from and back to the report (from Inbox -> FAB -> back to report) versus creating directly in the report.

[MelvinBot]

Proposal

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

When a new expense is created via the FAB (Floating Action Button) from the Inbox and submitted to an existing report, the report preview carousel auto-scrolls to the new expense but does not highlight it. However, when creating an expense directly from within the workspace chat, both scrolling and highlighting work correctly.

What is the root cause of that problem?

The root cause is a timing/focus race condition in how the useNewTransactions hook interacts with the isFocused gate in MoneyRequestReportPreview.

The useNewTransactions hook (src/hooks/useNewTransactions.ts:17-26) detects new transactions by computing a diff between the current transactions array and the previous one (via usePrevious). This diff is ephemeral — it only exists for the single render cycle where transactions contains something prevTransactions does not. After that render, usePrevious updates its ref via useEffect, making prevTransactions equal to transactions, and the diff is permanently lost.

In MoneyRequestReportPreview (src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx:124-127), the new transaction IDs are only passed through when the screen is focused:

const newTransactions = useNewTransactions(hasOnceLoadedReportActions, transactions);
const isFocused = useIsFocused();
const newTransactionIDs = isFocused ? new Set(newTransactions.map(...)) : undefined;

When creating from FAB (broken flow):

1. User is on the workspace chat (component is mounted, isFocused = true)
2. User navigates to Inbox, then taps FAB → creation modal opens → chat screen loses focus (isFocused = false)
3. Expense is created optimistically → Onyx updates → component re-renders while unfocused
4. useNewTransactions correctly detects the new transaction (diff is non-empty)
5. But isFocused is false, so newTransactionIDs = undefined — the diff result is unused
6. After render, usePrevious effect updates prevTransactions to include the new transaction — the diff is consumed/lost
7. User finishes and navigates back → screen regains focus (isFocused = true)
8. But now useNewTransactions returns empty (diff was consumed in step 6) → no highlighting

When creating from within the chat (working flow):

1. User is on the workspace chat (component is mounted, isFocused = true)
2. Expense is created → Onyx updates → component re-renders while focused
3. useNewTransactions detects the diff AND isFocused is true → newTransactionIDs is populated → highlighting works

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

In src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx, persist detected new transaction IDs in a useRef so they survive the unfocused period. When the screen regains focus, use the stored ref for highlighting instead of relying on the ephemeral useMemo value.

The approach:

1. Add a useRef<Set<string>> to accumulate new transaction IDs as they are detected by useNewTransactions (regardless of focus state)
2. When newTransactions from the hook is non-empty, add those IDs to the ref
3. Derive newTransactionIDs from the ref when isFocused is true
4. Clear the ref after the highlight animation has had time to play (using a timeout matching the animation duration constants)

This keeps the change scoped to one file and doesn't require modifying the useNewTransactions hook or the Onyx data layer.

What alternative solutions did you explore? (Optional)

1. Modify useNewTransactions to use useState instead of useMemo: This would make the detected new transactions persist across renders. However, it changes the hook's core behavior and could have unintended side effects in other consumers (e.g., ReportScreen.tsx:338).

2. Store newly created transaction IDs in Onyx during the IOU action: This would be the most robust solution (works even for fresh component mounts after expense creation), but it adds more complexity by introducing a new Onyx key and requiring cleanup logic across multiple files.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, or @MelvinBot <your feedback> to refine this analysis.