[Due for payment 2025-07-14] [$250] Reports - After deleting expense and returning to "Chats" messages display fallback avatar.

[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.56-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
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): ibellicotest+948@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome / Windows 10 - Chrome
App Component: Search

Action Performed:

Prerequisite: Account has at least one workspace available.
Prerequisite 2: No expenses created yet.

1. Open the Expensify app.
2. Open any workspace chat.
3. Submit a manual expense.
4. Navigate to "Reports"
5. Tap on the bookmark icon and select "Chats"
6. Note that all the messages display the correct avatat.
7. Tap on bookmark icon again and select "Expenses"
8. Long tap on the just created expense and select it.
9. Delete the expense.
10. After the expense disappears, use device´s back button to return to "Chats"
11. Note that now, all the messages display fallback avatar.

Expected Result:

All the messages on "Chats" section, should display the correct avatar in every moment.

Actual Result:

After deleting an expense on "Expenses" section and returning to "Chats" using the device´s back button, all the messages are displayed with fallback avatar.

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

Bug6849237_1748914437977.Fallback.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021933156796042939339
• Upwork Job ID: 1933156796042939339
• Last Price Increase: 2025-06-12
• Automatic offers:
• nkdengineer | Contributor | 107692736

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

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

[bernhardoj]

Proposal

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

It's not that after deleting expense, but after going from the empty expense tab back to the Chats tab, the avatar is shown with a fallback image.

What is the root cause of that problem?

The avatar is taken from the personal detail list collection.

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 124 in 4142c94

const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails?.[actorAccountID ?? CONST.DEFAULT_NUMBER_ID] ?? {};

However, after coming back from the empty expense report, the value is undefined. The value is retrieved from the onyx snapshot data, based on the current search hash.

App/src/hooks/useOnyx.ts

Lines 48 to 49 in 4142c94

	const useOnyx: OriginalUseOnyx = (key, options, dependencies) => {
	const {isOnSearch, currentSearchHash} = useSearchContext();

The current search hash is updated every time the hash is updated.

App/src/components/Search/index.tsx

Lines 180 to 183 in 4142c94

	useEffect(() => {
	clearSelectedTransactions(hash);
	setCurrentSearchHash(hash);
	}, [hash, clearSelectedTransactions, setCurrentSearchHash]);

This means that when switching between tabs (because a new search component is added), or updating the filter. However, when we navigate back using the browser/device back button, we simply pop the current search component and go back to the previous component. This doesn't trigger the above useEffect. So, the current search hash still hold the previous search hash, and since the previous search is an empty expense report, the personal details list is empty too.

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

We need to update the search hash every time the screen changes, too. The simplest way to do this is to use a useFocusEffect.

useFocusEffect(useCallback(() => {
    setCurrentSearchHash(hash);
}, []));

(we can update setCurrentSearchHash to ignore the call if the current search hash is the same as the passed hash)

And since we update the current search hash, this useEffect is now triggered because clearSelectedTransactions depends on currentSearchHash.

App/src/components/Search/index.tsx

Lines 180 to 183 in 4142c94

	useEffect(() => {
	clearSelectedTransactions(hash);
	setCurrentSearchHash(hash);
	}, [hash, clearSelectedTransactions, setCurrentSearchHash]);

To simplify this, we can move the useEffect logic into the useFocusEffect.

useFocusEffect(useCallback(() => {
    clearSelectedTransactions(hash);
    setCurrentSearchHash(hash);
}, [hash, clearSelectedTransactions, setCurrentSearchHash]));

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

N/A

[nkdengineer]

Proposal

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

After deleting an expense on "Expenses" section and returning to "Chats" using the device´s back button, all the messages are displayed with fallback avatar.

What is the root cause of that problem?

There're 2 issues:

1. Snapshot is not updated correctly

We're getting the personalDetails from snapshot

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 108 in 4142c94

const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {

and it's updated whenever we call Search API. For now we have 2 type of Search API: expense and chat.

1. expense will be called here when users open Expenses or Reports pages
2. chat will be called here when users open Chat pages

But in this case, if users open Chat page by using browser back button, this logic is not triggered since it's still in the stack and isn't unmounted.

So the snapshot is not updated as usual

In conclusion, hash and snapshot are not updated when users back to Chat page

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

1. Trigger Search API call with the correct type in here

useEffect(() => {
        if (isOffline || !isFocused) {
            return;
        }
        handleSearch({queryJSON, offset});
    }, [handleSearch, isOffline, offset, queryJSON, isFocused]);

2. Update hash in here

useEffect(() => {
        if (!isFocused) {
            return;
        }
        clearSelectedTransactions(hash);
        setCurrentSearchHash(hash); 
    }, [hash, clearSelectedTransactions, setCurrentSearchHash, isFocused]);

Note: If we just only update the hash, the Search API will be triggered again with the previous type (expense)

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)

N/A
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@zanyrenney Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@zanyrenney 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@zanyrenney 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[zanyrenney]

weird, why did this not assign a c+...