[$250] mWeb - Reports - "Total Spend" is not updated after editing an expense amount while offline.

[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.2.15-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: https://test-management.browserstack.com/projects/2219752/test-runs/TR-828/folder/13176922/41237504/899332465
Email or phone of affected tester (no customers): ibellicotest+1811@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 / Android 12 / Chrome ( mWeb)
App Component: Search

Action Performed:

Prerequisite: Account has at least one workspace.

1. Open the staging.new.expensify.com website.
2. Open any workspace chat.
3. Create a manual expense.
4. Navigate to "Reports" > "Submit"
5. Note that footer displays the correct information on "Expenses" and "Total Spend" fields.
6. Force offline using troubleshoot option.
7. Open the just created expense.
8. Edit the expense amount.
9. Return to "Reports"
10. Note that "Total Spend" field, still displays the old amount.
11. Turn on internet connection.
12. Note that "Total Spend" field, still displays the old amount.
13. Navigate to a different section and return to "Reports" > "Submit"
14. Note that "Total Spend" field is now updated.

Expected Result:

"Total Spend" field displayed on footer on "Submit" section, should be automatically updated after editing the amount of an expense.

Actual Result:

"Total Spend" field, displayed on footer on "Submit" section on "Reports", is not updated after editing the amount of an expense while offline and returning to online mode.

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

Bug6946668_1758074745409.Spend.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021968264549032274933
• Upwork Job ID: 1968264549032274933
• Last Price Increase: 2025-09-17

Issue Owner

Current Issue Owner: @francoisl

[melvin-bot]

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

[mukhrr]

Proposal

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

The "Total Spend" field displayed in the footer of the Reports > Submit section does not automatically update after editing an expense amount while offline and returning to online mode.

What is the root cause of that problem?

The footer relies on search metadata (metadata.total) stored in Onyx. After an offline edit, there was no trigger to refresh/recalculate totals on reconnection, so metadata.total remained stale.

App/src/pages/Search/SearchPage.tsx

Line 678 in aacbf6b

const total = shouldUseClientTotal ? Object.values(selectedTransactions).reduce((acc, transaction) => acc - (transaction.convertedAmount ?? 0), 0) : metadata?.total;

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

We can add a reconnect effect in SearchPage to detect offline→online transitions and re-run search({shouldCalculateTotals: true}) for the current query to refresh totals automatically:

    const wasOfflineRef = useRef(isOffline);
    useEffect(() => {
        if (wasOfflineRef.current && !isOffline && queryJSON) {
            search({queryJSON, searchKey: undefined, shouldCalculateTotals: true});
        }
        wasOfflineRef.current = isOffline;
    }, [isOffline, queryJSON]);

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

N/A

What alternative solutions did you explore? (Optional)

Optionally, we can recalculate total on reconnect.

    const queryJSON = useMemo(() => buildSearchQueryJSON(route.params.q), [route.params.q]);

    const {isOffline} = useNetwork({
        onReconnect: () => {
            if (!queryJSON) {
                return;
            }
            search({queryJSON, searchKey: undefined, shouldCalculateTotals: true});
        },
    });

[NJ-2020]

Proposal

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

mWeb - Reports - "Total Spend" is not updated after editing an expense amount while offline

What is the root cause of that problem?

Total Spend value is coming from snapshot.search.total

App/src/pages/Search/SearchPage.tsx

Lines 804 to 810 in 7684b0b

	{shouldShowFooter && (
	<SearchPageFooter
	count={footerData.count}
	total={footerData.total}
	currency={footerData.currency}
	/>
	)}

App/src/pages/Search/SearchPage.tsx

Lines 678 to 680 in 7684b0b

	const total = shouldUseClientTotal ? Object.values(selectedTransactions).reduce((acc, transaction) => acc - (transaction.convertedAmount ?? 0), 0) : metadata?.total;
	return {count, total, currency};

App/src/pages/Search/SearchPage.tsx

Line 633 in 7684b0b

const searchResults = currentSearchResults?.data ? currentSearchResults : lastNonEmptySearchResults.current;

But when updating the amount, we didn't update the snapshot.search.total

App/src/libs/actions/IOU.ts

Lines 4510 to 4529 in 7684b0b

	if (hash) {
	optimisticData.push({
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
	value: {
	data: {
	[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`]: violationsOnyxData.value,
	},
	},
	});
	failureData.push({
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
	value: {
	data: {
	[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`]: currentTransactionViolations,
	},
	},
	});
	}

But other collection/data is correctly updated in the snapshot because inside react-native-onyx, when applying for Onyx updates, we're checking and applying for snapshot data too if available

https://github.com/NJ-2020/react-native-onyx/blob/6978c02088147db2dc13be9700291c128aded406/lib/Onyx.ts#L516
https://github.com/NJ-2020/react-native-onyx/blob/6978c02088147db2dc13be9700291c128aded406/lib/Onyx.ts#L648-L653
https://github.com/NJ-2020/react-native-onyx/blob/6978c02088147db2dc13be9700291c128aded406/lib/OnyxUtils.ts#L1434

Basically we're copying report data changes into snapshot, but since the total property only exist inside snapshot.search and we didn't include optimistic update inside getUpdateMoneyRequestParams, so the value will never get updated until BE response

App/src/libs/actions/IOU.ts

Lines 4510 to 4529 in aacbf6b

	if (hash) {
	optimisticData.push({
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
	value: {
	data: {
	[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`]: violationsOnyxData.value,
	},
	},
	});
	failureData.push({
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
	value: {
	data: {
	[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`]: currentTransactionViolations,
	},
	},
	});
	}

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

We should update total value accordingly

function getUpdateMoneyRequestParams(
    transactionID: string | undefined,
    ...,
    hash?: number,
    snapshot?: OnyxEntry<OnyxTypes.SearchResults>,
): UpdateMoneyRequestData {

    const currentSearchTotal = snapshot?.search?.total;
    if (
        policy &&
        isPaidGroupPolicy(policy) &&
        ...
    ) {
        if (hash) {
            const isExpenseReportLocal = isExpenseReport(iouReport);
            const currentAmount = Math.abs(getAmount(transaction, isExpenseReportLocal));
            const updatedAmount = Math.abs(getAmount(updatedTransaction, isExpenseReportLocal));

            optimisticData.push({
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
                value: {
                    data: {
                        [`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`]: violationsOnyxData.value,
                    },
                    search: {
                        total: currentSearchTotal ? currentSearchTotal - currentAmount + updatedAmount : updatedAmount,
                    },
                },
            });
            failureData.push({
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
                value: {
                    data: {
                        [`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`]: currentTransactionViolations,
                    },
                    search: {
                        total: currentSearchTotal,
                    },
                },
            });
        }
     }
}

And if necessary, we can invoke search call for new BE search request

const {currentSearchHash, currentSearchQueryJSON, currentSearchKey} = useSearchContext();
const [snapshotData] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${currentSearchHash}`, {canBeMissing: true});

...

if(currentSearchKey) {
  return;
}

search({queryJSON: currentSearchQueryJSON, searchKey: currentSearchKey, offset: 0, shouldCalculateTotals: true});

We should check for other places too

Result

Screen.Recording.2025-09-17.at.15.37.29.mov

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

Create unit test and make sure the getUpdateMoneyRequestParams/updateMoneyRequestAmountAndCurrency update the snapshot search data total accordingly

What alternative solutions did you explore? (Optional)

Alternatively we could also set the total by summing all the transactions list

[melvin-bot]

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

[melvin-bot]

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

[truph01]

@NJ-2020’s proposal to optimistically update the metadata.total when editing the amount looks good to me!

Looping in @JS00001 for review since you implemented this feature in this PR.

🎀 👀 🎀 C+ reviewed