[HOLD 79160] Reports - Category row auto expands with empty expense after creating expense

[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.10-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #80333
Email or phone of affected tester (no customers): jsoidjnosdiodsjnosjnois@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.1 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Create a new account.
3. Create a workspace.
4. Go to Reports > Top categories.
5. Open FAB > Create expense > Manual.
6. Create a manual expense with date from last month and any category.
7. Expand the category row.
8. Open FAB > Create expense > Manual.
9. Create a manual expense with date from last month and DIFFERENT category.

Expected Result:

The new category row will expand and show the expense.

Actual Result:

The new category row expands and does not show the expense.
The same issue happens on Top spenders.

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: @ZhenjaHorbach

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ZhenjaHorbach (External)

[melvin-bot]

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

[MobileMage]

Proposal

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

When viewing Reports > Top categories (or Top spenders), creating a new expense with a different category causes the new category row to expand but show empty content instead of displaying the newly created expense.

What is the root cause of that problem?

The root cause is in TransactionGroupListItem.tsx. When a new transaction is created that belongs to a category group, the component receives a newTransactionID prop indicating which transaction is new. However, the row does not automatically expand when this happens.

Looking at the code in /Users/user/Documents/GitHub/App/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx:

1. Line 103: The isExpanded state is initialized as false:

   const [isExpanded, setIsExpanded] = useState(false);

2. Lines 190-195: The effect that fetches transaction data only runs when BOTH newTransactionID exists AND isExpanded is true:

   useEffect(() => {
       if (!newTransactionID || !isExpanded) {
           return;
       }
       searchTransactions();
   }, [newTransactionID, isExpanded, searchTransactions]);

3. Lines 107-139: The transactions array relies on transactionsSnapshot?.data which is populated by searchTransactions():

   const transactions = useMemo(() => {
       if (isExpenseReportType) {
           return groupItem.transactions;
       }
       if (!transactionsSnapshot?.data) {
           return [];  // Returns empty if snapshot not loaded
       }
       // ... process data
   }, [...]);

The problem flow:

1. User creates a new expense with a different category
2. The newTransactionID prop is passed to the matching TransactionGroupListItem
3. The item's shouldAnimateInHighlight flag is set to true (for visual highlighting)
4. But isExpanded remains false since the row was never expanded before
5. The effect at lines 190-195 exits early because isExpanded is false
6. searchTransactions() is never called
7. transactionsSnapshot remains undefined
8. When the row visually appears expanded (via animation/highlighting), transactions is an empty array
9. The user sees an empty expanded row

There is no logic to automatically expand the row when newTransactionID is detected.

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

Add an effect in TransactionGroupListItem.tsx that automatically expands the row and triggers a search when a newTransactionID is detected for non-expense-report types (category groups, spender groups, etc.).

The fix should be added after line 195 in /Users/user/Documents/GitHub/App/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx:

// Auto-expand and fetch transactions when a new transaction is detected for this group
useEffect(() => {
    if (!newTransactionID || isExpenseReportType || isExpanded) {
        return;
    }
    // Expand the row to show the new transaction
    setIsExpanded(true);
    // Trigger search to load the transaction data
    if (groupItem.transactionsQueryJSON) {
        searchTransactions();
    }
}, [newTransactionID, isExpenseReportType, isExpanded, groupItem.transactionsQueryJSON, searchTransactions]);

This effect:

1. Only triggers when newTransactionID is present (a new transaction matches this group)
2. Skips expense report types (they already have transactions in groupItem.transactions)
3. Skips if already expanded (prevents re-triggering)
4. Expands the row via setIsExpanded(true)
5. Calls searchTransactions() to fetch the transaction data

After this fix:

• When a new expense is created with a different category, the category row will automatically expand
• The searchTransactions() call will populate transactionsSnapshot with the transaction data
• The user will see the newly created expense displayed in the expanded row

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @yatin-italy Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[M00rish]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-28 01:18:55 UTC.

Proposal

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

Reports - Category row auto expands with empty expense after creating expense

What is the root cause of that problem?

App/src/libs/SearchUIUtils.ts

Lines 2206 to 2212 in a9488e7

	categorySections[key] = {
	groupedBy: CONST.SEARCH.GROUP_BY.CATEGORY,
	transactions: [],
	transactionsQueryJSON,
	...categoryGroup,
	formattedCategory,
	};

Grouped search rows do not get a stable keyForList. In SearchList, the fallback key is the list index when keyForList is missing. When the data updates (e.g., a new category group is inserted because of a new expense), React reuses the existing row component instance by index. That causes the isExpanded state from the previously expanded row to “move” to a different group.

The new row looks expanded but its transactions snapshot was never fetched (no explicit expand action for that group), so it renders empty. This only shows up when another row is expanded because that’s when there is state to be reused across rows.

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

Assign stable keys to grouped items so React doesn’t reuse expansion state across different groups.:

 categorySections[key] = {
                keyForList: key,
                groupedBy: CONST.SEARCH.GROUP_BY.CATEGORY,
                transactions: [],
                transactionsQueryJSON,
                ...categoryGroup,
                formattedCategory,
            };

And in TransactionGroupListItem.tsx add:

useEffect(() => {
    if (!newTransactionID || isExpanded || isExpenseReportType) {
        return;
    }
 
    setIsExpanded(true);
}, [newTransactionID, isExpanded, isExpenseReportType]);

Or extend already existing useEffect

What alternative solutions did you explore? (Optional)

N/A