[$250] Profile - Two default avatar appears when remove custom profile image

[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: v9.2.18-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: https://test-management.browserstack.com/projects/2219752/test-runs/TR-932/folder/13176687/41236648/915648776?p=2
Email or phone of affected tester (no customers): gocemate+b2154314@gmail.com
Issue reported by: Applause Internal Team
Device used: Lenovo 80ES / Windows 10 Pro
App Component: Other

Action Performed:

1. Go to staging.new.expesify.com
2. Go to Account> Profile> Add custom image to avatar
3. Remove the custom avatar

Expected Result:

There should be only one default avatar

Actual Result:

Two default avatar appears when remove custom profile image

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

Bug6955171_1758784584505.Recording__6149.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021973077251609170579
• Upwork Job ID: 1973077251609170579
• Last Price Increase: 2025-10-07
• Automatic offers:
• dominictb | Reviewer | 109051287

Issue Owner

Current Issue Owner: @grgia

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

[abzokhattab]

@mitarachim, i reproduced the issue from the steps but i think the screenshot video is not correct. can you please recheck

[mitarachim]

thanks for letting me know @abzokhattab , just updated the video

[lorretheboy]

Hmm I remember we have a similar issue reported before @mitarachim, however, we decided to close it as it is an edge case. Are we bringing it back to tackle?

[Eskalifer1]

#69463

Hmm I remember we have a similar issue reported before @mitarachim, however, we decided to close it as it is an edge case. Are we bringing it back to tackle?

[lorretheboy]

Drop back here the proposal I have posted here just in case we want to deal with it

Proposal

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

Default avatar changed for instant when deleting profile picture

What is the root cause of that problem?

In updateAvatar, when a user uploads a custom avatar, the fallbackIcon is set to file.uri (the uploaded image)

App/src/libs/actions/PersonalDetails.ts

Line 398 in e5722de

fallbackIcon: file.uri,

In deleteAvatar, it calls UserUtils.getDefaultAvatarURL(currentUserAccountID) without passing the original avatar URL

App/src/libs/actions/PersonalDetails.ts

Line 446 in e5722de

const defaultAvatar = UserUtils.getDefaultAvatarURL(currentUserAccountID);

However, the getAccountIDHashBucket function has two different logic paths:

If avatarURL is provided: extract the number from the URL (preserves original default avatar)

If avatarURL is NOT provided: calculate using accountID % CONST.DEFAULT_AVATAR_COUNT (may give different result)

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

We should update

    // Store the original default avatar URL if the current avatar is a default avatar
    // This preserves the user's original default avatar for when they delete their custom avatar
    const originalDefaultAvatar = UserUtils.isDefaultAvatar(currentUserPersonalDetails?.avatar)
        ? currentUserPersonalDetails?.avatar
        : UserUtils.getDefaultAvatarURL(currentUserAccountID);

....


      fallbackIcon: originalDefaultAvatar,

App/src/libs/actions/PersonalDetails.ts

Line 398 in e5722de

fallbackIcon: file.uri,

Do similar to delete case

    // Use the stored fallbackIcon (original default avatar) if available, otherwise calculate default avatar
    // This preserves the user's original default avatar instead of generating a potentially different one
    const defaultAvatar = currentUserPersonalDetails?.fallbackIcon && UserUtils.isDefaultAvatar(currentUserPersonalDetails.fallbackIcon)
        ? currentUserPersonalDetails.fallbackIcon
        : UserUtils.getDefaultAvatarURL(currentUserAccountID);

App/src/libs/actions/PersonalDetails.ts

Lines 445 to 446 in e5722de

	// We want to use the old dot avatar here as this affects both platforms.
	const defaultAvatar = UserUtils.getDefaultAvatarURL(currentUserAccountID);

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

NA

What alternative solutions did you explore? (Optional)

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.

[abzokhattab]

Proposal

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

Two default avatars appear when removing a custom profile image instead of showing only one.

What is the root cause of that problem?

• The deleteAvatar function incorrectly sets the avatar field to a default avatar URL instead of clearing it here
• When deleteAvatar is called, it sets avatar: defaultAvatar (a URL string) and fallbackIcon: null
• The Avatar component receives this URL and processes it through getAvatar() and isDefaultAvatar() functions
• Since the URL contains 'images/avatars/default-avatar_', isDefaultAvatar() returns true and getAvatar() returns the old avatar SVG, causing it to be shown again in the middle

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

• Modify the deleteAvatar function in PersonalDetails.ts to set avatar: '' (empty string) instead of avatar: defaultAvatar here
• This aligns with how deleteWorkspaceAvatar works, which correctly sets avatarURL: ''

result

Screen.Recording.2025-09-25.at.12.16.37.mov

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

NA

What alternative solutions did you explore? (Optional)

NA

[mitarachim]

Thank you letting me know @Eskalifer1 . I had missed this known issue.
I will look into the decision on this issue afterwards.

[M00rish]

Proposal

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

Profile - Two default avatar appears when remove custom profile image

What is the root cause of that problem?

when delete of custom avatar happens, current logic does not feed getDefaultAvatarURL with original avatar url:

App/src/libs/actions/PersonalDetails.ts

Lines 426 to 432 in 5edc01d

	function deleteAvatar(currentUserPersonalDetails: Pick<CurrentUserPersonalDetails, 'fallbackIcon' | 'avatar' | 'accountID'>) {
	if (!currentUserPersonalDetails.accountID) {
	return;
	}
	// We want to use the old dot avatar here as this affects both platforms.
	const defaultAvatar = UserUtils.getDefaultAvatarURL(currentUserPersonalDetails.accountID);

so it takes random id random from CLOUDFRONT with getAccountIDHashBucket and seetting optimistiaclly in deleteAvatar:

App/src/libs/UserUtils.ts

Lines 153 to 162 in 5edc01d

	function getDefaultAvatarURL(accountID: string | number = '', avatarURL?: string): string {
	if (Number(accountID) === CONST.ACCOUNT_ID.CONCIERGE) {
	return CONST.CONCIERGE_ICON_URL;
	}
	const accountIDHashBucket = getAccountIDHashBucket(Number(accountID) || -1, avatarURL);
	const avatarPrefix = `default-avatar`;
	return `${CONST.CLOUDFRONT_URL}/images/avatars/${avatarPrefix}_${accountIDHashBucket}.png`;
	}

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

add avatar url argument :

   const defaultAvatar = currentUserPersonalDetails.avatar ?? UserUtils.getDefaultAvatarURL(currentUserPersonalDetails.accountID,currentUserPersonalDetails.avatar):....;

or use getAvatarUrl, since it uses getDefaultAvatarURL if it's a default avatar:

 const defaultAvatar = UserUtils.getAvatarUrl(currentUserPersonalDetails.avatar,currentUserPersonalDetails.accountID);

this way we set current custom picture optimisticaly untill original one comes from backend, so the behavior is consistent and normal.

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

we could add test for deleteAvatar to check if returns correct orginal avatar

What alternative solutions did you explore? (Optional)

we can create a new onyx key in personalDetailsList object for accounts to have a originalavatarURL that would be used when deleting a custom picture.

[bernhardoj]

Copying my proposal from #69463 too

Proposal

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

When deleting avatar, the optimistic default avatar is different from the BE.

What is the root cause of that problem?

When we delete the custom avatar, we optimistically set a default avatar based on the user accountID.

App/src/libs/UserUtils.ts

Lines 114 to 129 in bdbb8dc

	function getAccountIDHashBucket(accountID = -1, avatarURL?: string) {
	// There are 24 possible default avatars, so we choose which one this user has based
	// on a simple modulo operation of their login number. Note that Avatar count starts at 1.
	// When creating a chat the backend response will return the actual user ID.
	// But the avatar link still corresponds to the original ID-generated link. So we extract the SVG image number from the backend's link instead of using the user ID directly
	let accountIDHashBucket: AvatarRange | undefined;
	if (avatarURL) {
	const match = avatarURL.match(/(default-avatar_|avatar_)(\d+)(?=\.)/);
	const lastDigit = match && parseInt(match[2], 10);
	accountIDHashBucket = lastDigit as AvatarRange;
	} else if (accountID > 0) {
	accountIDHashBucket = ((accountID % CONST.DEFAULT_AVATAR_COUNT) + 1) as AvatarRange;
	}
	return accountIDHashBucket;
	}

App/src/libs/UserUtils.ts

Lines 153 to 162 in bdbb8dc

	function getDefaultAvatarURL(accountID: string | number = '', avatarURL?: string): string {
	if (Number(accountID) === CONST.ACCOUNT_ID.CONCIERGE) {
	return CONST.CONCIERGE_ICON_URL;
	}
	const accountIDHashBucket = getAccountIDHashBucket(Number(accountID) || -1, avatarURL);
	const avatarPrefix = `default-avatar`;
	return `${CONST.CLOUDFRONT_URL}/images/avatars/${avatarPrefix}_${accountIDHashBucket}.png`;
	}

But the result is different from the BE. For example, on my account, the accountID hash bucket is 2, but BE returns 12.

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

It's either the BE for FE is wrong. If the FE is wrong, then we can update the logic to match the BE.

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

We can test getAccountIDHashBucket after the logic has been updated. (or maybe the getDefaultAvatarURL, depends on which logic to change).