[Due for payment 2025-12-10] Reports - App crashes when switching group-by from "From" to "Withdrawal ID"

[lanitochka17]

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.2.0-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #66045
Email or phone of affected tester (no customers): sdjdjdsonoisjid@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Create an expense in workspace chat
4. Go to Reports > Expenses
5. Type group-by:from in the search field and hit Enter
6. Click Group by:From filter
7. Select Withdrawal ID
8. Click Apply

Expected Result:

App will not crash

Actual Result:

App crashes when switching group-by from "From" to "Withdrawal ID"

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
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6929344_1756395433066.Screen_Recording_2025-08-28_at_23.34.00.mp4

logs (3).txt

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @lydiabarclay

[melvin-bot]

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

[lydiabarclay]

Reviewing asap

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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

[marufsharifi]

🚨 Edited by proposal-police: This proposal was edited at 2025-09-03 11:43:54 UTC.

Proposal

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

Reports - App crashes when switching group-by from "From" to "Withdrawal ID"

What is the root cause of that problem?

When the search page mounts, useOnyx runs and stores the current search result in resultRef

https://github.com/Expensify/react-native-onyx/blob/6978c02088147db2dc13be9700291c128aded406/lib/useOnyx.ts#L124-L132

We then call setParams, triggering a component re-render.

App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

Lines 223 to 225 in 9244a4e

	close(() => {
	Navigation.setParams({q: queryString});
	});

When the hash changes, the key for useOnyx also changes, causing it to run with the new key. On the first call, it returns resultRef.current.

https://github.com/Expensify/react-native-onyx/blob/6978c02088147db2dc13be9700291c128aded406/lib/useOnyx.ts#L326-L330

Internal refs like resultRef persist across re-renders without resetting, retaining values tied to the old key. In the initial synchronous re-render, getSnapshot skips fresh cache fetching (shouldGetCachedValueRef.current is false), returning the stale resultRef.current. The subscribe function then establishes a new Onyx connection, whose callback asynchronously sets shouldGetCachedValueRef.current = true and triggers a second re-render to fetch/update with the new key's data.

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

The component should remount when the hash changes. To enforce this, use navigate instead of setParams

App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

Lines 223 to 225 in 9244a4e

	close(() => {
	Navigation.setParams({q: queryString});
	});

Update to

Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: queryString}));

Or we can update this

App/src/components/SelectionList/Search/WithdrawalIDListItemHeader.tsx

Lines 73 to 76 in c46f457

	<TextWithTooltip
	text={`${formattedBankName} xx${withdrawalIDItem.accountNumber.slice(-4)}`}
	style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre]}
	/>

to

     <TextWithTooltip
                                text={`${formattedBankName} xx${withdrawalIDItem.accountNumber?.slice(-4)}`}
                                style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre]}
                            />

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

We can explicitly check accountNumber instead of automatically spreading withdrawalIDGroup

App/src/libs/SearchUIUtils.ts

Lines 1584 to 1601 in 697149c

	if (isGroupEntry(key)) {
	const withdrawalIDGroup = data[key] as SearchWithdrawalIDGroup;
	let transactionsQueryJSON: SearchQueryJSON | undefined;
	if (queryJSON && withdrawalIDGroup.entryID) {
	const newFlatFilters = queryJSON.flatFilters.filter((filter) => filter.key !== CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID);
	newFlatFilters.push({key: CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID, filters: [{operator: CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO, value: withdrawalIDGroup.entryID}]});
	const newQueryJSON: SearchQueryJSON = {...queryJSON, groupBy: undefined, flatFilters: newFlatFilters};
	const newQuery = buildSearchQueryString(newQueryJSON);
	transactionsQueryJSON = buildSearchQueryJSON(newQuery);
	}
	withdrawalIDSections[key] = {
	groupedBy: CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID,
	transactions: [],
	transactionsQueryJSON,
	...withdrawalIDGroup,
	};
	}

update to this

withdrawalIDSections[key] = {
    groupedBy: CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID,
    transactions: [],
    ...withdrawalIDGroup,
    accountNumber: withdrawalIDGroup?.accountNumber ?? '',
};

Or ignore the item if withdrawalIDGroup.accountNumber was falsy

    if (queryJSON && withdrawalIDGroup.entryID) {
                const newFlatFilters = queryJSON.flatFilters.filter((filter) => filter.key !== CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID);
                newFlatFilters.push({key: CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID, filters: [{operator: CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO, value: withdrawalIDGroup.entryID}]});
                const newQueryJSON: SearchQueryJSON = {...queryJSON, groupBy: undefined, flatFilters: newFlatFilters};
                const newQuery = buildSearchQueryString(newQueryJSON);
                transactionsQueryJSON = buildSearchQueryJSON(newQuery);
            }

            if (!withdrawalIDGroup.accountNumber) {
                continue;
            }

            withdrawalIDSections[key] = {
                groupedBy: CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID,
                transactions: [],
                transactionsQueryJSON,
                ...withdrawalIDGroup,
            };