[$250] Reports - Expense image is updated in the list after page reload if a receipt is uploaded

[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: v9.1.27-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Macbook/macOS 14.5/ Chrome
App Component: Chat Report View

Action Performed:

Precondition: account has expense without receipt

1. Open staging.new.expensify.com
2. Click on Reports tab
3. Click on expense without receipt
4. Upload image for this expense
5. Back to Report screen

Expected Result:

The uploaded image should be displayed

Actual Result:

Expense is still displayed without image. Need to reload page to see the uploaded receipt

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021912402962338651534
• Upwork Job ID: 1912402962338651534
• Last Price Increase: 2025-05-21
• Automatic offers:
• FitseTLT | Contributor | 107451129

Issue Owner

Current Issue Owner: @JmillsExpensify

[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.

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-11 14:10:12 UTC.

Proposal

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

Reports - Expense image is updated in the list after page reload if a receipt is uploaded

What is the root cause of that problem?

In react-native-onyx when we update snapshots from the response of the BE we only assign props of the response data if the key exists in search snapshotData. But in this case, the BE response for transaction_ key looks

filename
: 
"w_72709fbe3d2af722ff1b02e43e9b60cf162c7832.jpg"

receipt
: 
{
receiptID
: 
6530244379961027

source
: 
"https://www.expensify.com/receipts/w_72709fbe3d2af722ff1b02e43e9b60cf162c7832.jpg"

state
: 
"OPEN"
}

but receipt and filename keys don't exist in search snapshotData transaction so the data from the BE will not be included in newValue here

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

We can directly update the data without picking only keys of snapshot data

            updatedData = {...updatedData, [key]: Object.assign(oldValue, value)};

Alternatively, we can make exceptions (only where needed) of picking props from the response data even if it is not part of the snapshot data. Like in this case, when the key is transactions_ we will have to pick filename and receipt even if it is not part of the snapshot data.
Or to be safe we can list out the appropriate props for all keys like transactions_ reports_ etc and only pick the appropriate props from the response data. we can get that list in OnyxTypes.SearchResults type. We can pick the keys from SearchResults.data[key] instead of only applying existing keys from snapshotData to safely pick relevant data from BE response.

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)

[Tony-MK]

Proposal

Please restate the problem that we are trying to solve in this issue.

The expense image is updated in the list after the page reloads if a receipt is uploaded.

What is the root cause of that problem?

Unlike updating the amount, category, tax, etc, when the user replaces the receipt, no new report action is created because of the change.

App/src/hooks/useSearchHighlightAndScroll.ts

Lines 42 to 53 in be19854

	const reportActionsIDs = Object.values(reportActions ?? {})
	.map((actions) => Object.keys(actions ?? {}))
	.flat();
	const previousReportActionsIDs = Object.values(previousReportActions ?? {})
	.map((actions) => Object.keys(actions ?? {}))
	.flat();
	if (searchTriggeredRef.current) {
	return;
	}
	const hasTransactionsIDsChange = !isEqual(transactionsIDs, previousTransactionsIDs);
	const hasReportActionsIDsChange = !isEqual(reportActionsIDs, previousReportActionsIDs);

Therefore, the reportActionsIDs will always be the same as previousReportActionsIDs so the useSearchHighlightAndScroll hook doesn't trigger another search.

App/src/hooks/useSearchHighlightAndScroll.ts

Lines 55 to 67 in be19854

	// Check if there is a change in the transactions or report actions list
	if ((!isChat && hasTransactionsIDsChange) || hasReportActionsIDsChange) {
	// We only want to highlight new items if the addition of transactions or report actions triggered the search.
	// This is because, on deletion of items, the backend sometimes returns old items in place of the deleted ones.
	// We don't want to highlight these old items, even if they appear new in the current search results.
	hasNewItemsRef.current = isChat ? reportActionsIDs.length > previousReportActionsIDs.length : transactionsIDs.length > previousTransactionsIDs.length;
	// Set the flag indicating the search is triggered by the hook
	triggeredByHookRef.current = true;
	// Trigger the search
	search({queryJSON, offset});

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

We should use hasTransactionsChange to check if the keys and values for transactions and previousTransactions have changed using deepEqual, then get rid of hasTransactionsIDsChange.

App/src/hooks/useSearchHighlightAndScroll.ts

Lines 52 to 56 in be19854

	const hasTransactionsIDsChange = !isEqual(transactionsIDs, previousTransactionsIDs);
	const hasReportActionsIDsChange = !isEqual(reportActionsIDs, previousReportActionsIDs);
	// Check if there is a change in the transactions or report actions list
	if ((!isChat && hasTransactionsIDsChange) || hasReportActionsIDsChange) {

const hasTransactionsChange = !deepEqual(transactions, previousTransactions);
const hasReportActionsIDsChange = !isEqual(reportActionsIDs, previousReportActionsIDs);

// Check if there is a change in the transactions or report actions list
if ((!isChat && hasTransactionsChange) || hasReportActionsIDsChange) {

Optionally, it is faster to compare some important keys that change without being accompanied by a report action.

For instance, such as the proposed alternative solution where it only compares the value of transaction's receipt source.

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)

Instead of comparing transactions with previousTransactions, we can create hasTransactionsReceiptsChange and create a new condition for checking if only the receipt source of the transactions has changed compared to previousTransactions.

if ((!isChat && (hasTransactionsIDsChange || hasTransactionsReceiptsChange)) || hasReportActionsIDsChange) {

[melvin-bot]

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

[melvin-bot]

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