[Due for payment 2025-09-19] [$250] Reports - Deleted expense is unselected before disappearing

[mitarachim]

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.1.80-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #65727
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Samsung Galaxy A52s 5G / Android 14, Apple iPhone 12 Pro / iOS 18.5
App Component: Search

Action Performed:

1. Open the app
2. Log in with a new expensifail account
3. Tap on "Reports"
4. Tap on FAB - Create expense - Manual
5. Create an expense with a Gmail account
6. Select the expense
7. Tap on the "1 selected" button
8. Tap on "Delete"
9. Tap on the "Delete" button

Expected Result:

Deleted expense should disappear instantly.

Actual Result:

Deleted expense is unselected before disappearing.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6885109_1752264729853.az_recorder_20250711_220103.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021945012587501504085
• Upwork Job ID: 1945012587501504085
• Last Price Increase: 2025-07-22

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.

[mohammadjafarinejad]

Proposal

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

Deleted expense is unselected before disappearing.

What is the root cause of that problem?

The deleteMoneyRequestOnSearch() function does not optimistically update the transaction list.

App/src/libs/actions/Search.ts

Lines 388 to 390 in 46278af

	function deleteMoneyRequestOnSearch(hash: number, transactionIDList: string[]) {
	const {optimisticData, finallyData} = getOnyxLoadingData(hash);
	API.write(WRITE_COMMANDS.DELETE_MONEY_REQUEST_ON_SEARCH, {hash, transactionIDList}, {optimisticData, finallyData});

Also, we clear the selection immediately after the user confirms deletion, but the item stays on the screen until the backend responds. This causes a brief moment where the item is deselected but still visible.

App/src/pages/Search/SearchPage.tsx

Lines 380 to 386 in 46278af

	deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
	// Translations copy for delete modal depends on amount of selected items,
	// We need to wait for modal to fully disappear before clearing them to avoid translation flicker between singular vs plural
	InteractionManager.runAfterInteractions(() => {
	clearSelectedTransactions();
	});

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

We can update the deleteMoneyRequestOnSearch() to include optimistic data:

function deleteMoneyRequestOnSearch(hash: number, transactionIDList: string[]) {
    const {optimisticData, failureData, finallyData} = getOnyxLoadingData(hash);

    const createOnyxData = (update: Partial<SearchTransaction> | Partial<SearchReport>): OnyxUpdate[] => [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
            value: {
                data: Object.fromEntries(
                    transactionIDList.map((transactionID) => [
                        `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
                        update,
                    ])
                ) as Partial<SearchTransaction>,
            },
        },
    ];

    optimisticData.push(...createOnyxData({pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}));
    finallyData.push(...createOnyxData({pendingAction: null}));

    API.write(WRITE_COMMANDS.DELETE_MONEY_REQUEST_ON_SEARCH, {hash, transactionIDList}, {optimisticData, failureData});
}

Also we should call deleteMoneyRequestOnSearch() next to clearSelectedTransactions(), so both updates happens at the same time

InteractionManager.runAfterInteractions(() => {
    deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
    clearSelectedTransactions();
});

If we want deleted items (those with pendingAction) to disappear from the search results immediately, I believe that’s already being handled in this PR. If not, we can handle it here after that PR is merged.

Here’s a demo of the fix:

Fix.66028.mp4

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

What alternative solutions did you explore? (Optional)

• Delaying the clearing of selection until after backend confirmation.

[bernhardoj]

Proposal

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

When deleting expense from search, the item is deselected first for a while before it's removed from the list.

What is the root cause of that problem?

We currently only optimistically update the loading data.

App/src/libs/actions/Search.ts

Lines 388 to 391 in 3ee664b

	function deleteMoneyRequestOnSearch(hash: number, transactionIDList: string[]) {
	const {optimisticData, finallyData} = getOnyxLoadingData(hash);
	API.write(WRITE_COMMANDS.DELETE_MONEY_REQUEST_ON_SEARCH, {hash, transactionIDList}, {optimisticData, finallyData});
	}

Even though we already wrap the clearSelectedTransactions in runAfterInteractions, it's still executed earlier before the API response that delete the transaction data from the snapshot.

App/src/pages/Search/SearchPage.tsx

Lines 374 to 387 in 3ee664b

	const handleDeleteExpenses = () => {
	if (selectedTransactionsKeys.length === 0 || !hash) {
	return;
	}
	setIsDeleteExpensesConfirmModalVisible(false);
	deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
	// Translations copy for delete modal depends on amount of selected items,
	// We need to wait for modal to fully disappear before clearing them to avoid translation flicker between singular vs plural
	InteractionManager.runAfterInteractions(() => {
	clearSelectedTransactions();
	});
	};

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

First, we need to optimistically update the transaction data in the snapshot.

const {optimisticData: loadingOptimisticData, finallyData} = getOnyxLoadingData(hash);
const optimisticData: OnyxUpdate[] = [
    ...loadingOptimisticData,
    {
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
        value: { 
            data:Object.fromEntries(transactionIDList.map((transactionID) => [`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}])) as Partial<SearchTransaction>
        },
    },
]

(and the failure data that removes the pending action when fail)

Next, we need to move deleteMoneyRequestOnSearch inside the runAfterInteractions too, otherwise, the expense is deleted earlier before the item is unselected (which will show 1 selected even though the expense is not shown anymore).

App/src/pages/Search/SearchPage.tsx

Lines 374 to 387 in 3ee664b

	const handleDeleteExpenses = () => {
	if (selectedTransactionsKeys.length === 0 || !hash) {
	return;
	}
	setIsDeleteExpensesConfirmModalVisible(false);
	deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
	// Translations copy for delete modal depends on amount of selected items,
	// We need to wait for modal to fully disappear before clearing them to avoid translation flicker between singular vs plural
	InteractionManager.runAfterInteractions(() => {
	clearSelectedTransactions();
	});
	};

Last, we need to update isSearchResultsEmpty to filter out pending delete transactions.

function isSearchResultsEmpty(searchResults: SearchResults) {
    return !Object.values(searchResults?.data).some((data) => 'transactionID' in data && (data as SearchTransaction)?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
}

With all these changes, when deleting expense, the empty view will show immediately (when no expense left)

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

We can test Search.deleteMoneyRequestOnSearch and assert all the transaction pendingAction is set to delete

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021945012587501504085

[Beamanator]

Looks like an external issue! (sorry for randomly popping in 😅 )

[melvin-bot]

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

[hoangzinh]

Thank you for posting proposals, @bernhardoj @mohammadjafarinejad. I will review them soon