[Due for payment 2026-01-05] [$250] Account – Confirmation message shown when saving Profile image

[lanitochka17]

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.59-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/folder/13176687/test-cases/41236648
Email or phone of affected tester (no customers): sintayewhaylu01@gmail.comi
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensfy.com
2. Create a workspace(important step)
3. Go to account page
4. Edit the profile by selecting the avatar (the circle with letters)
5. Click Save

Expected Result:

There should be no confirmation message pop up shown when updating profile avatar

Actual Result:

The avatar updates in the background but there is a pop up confirmation with no usage
Note : Only reproducible when a user have a workspace

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug7004366_1763157254602.bandicam_2025-11-15_00-42-21-665.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021993639003246435562
• Upwork Job ID: 1993639003246435562
• Last Price Increase: 2025-11-26
• Automatic offers:
• apeyada | Contributor | 109776392

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

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

[apeyada]

Proposal

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

Account – Confirmation message shown when saving Profile image

What is the root cause of that problem?

After selecting the avatar (the circle with letters) and click Save, this code is run:

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Lines 188 to 197 in ca4289f

	avatarCaptureRef.current.capture()?.then((file) => {
	updateAvatar(file, {
	avatar: currentUserPersonalDetails?.avatar,
	avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail,
	accountID: currentUserPersonalDetails?.accountID,
	});
	setSelected(undefined);
	setImageData({...EMPTY_FILE});
	Navigation.dismissModal();
	isSavingRef.current = false;

So

• update selected state to undefined
• dismiss modal
• set isSavingRef.current to false

When dismiss modal, we check if it has unsaved changes here:

App/src/pages/iou/request/step/DiscardChangesConfirmation/index.tsx

Lines 44 to 48 in ca4289f

	const unsubscribe = navigation.addListener('transitionStart', ({data: {closing}}) => {
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if (!getHasUnsavedChanges()) {
	return;
	}

getHasUnsavedChanges checks isSavingRef.current and isDirty

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 315 in ca4289f

<DiscardChangesConfirmation getHasUnsavedChanges={() => !isSavingRef.current && isDirty} />

The issue is that !isSavingRef.current && isDirty = true even though we already set isSavingRef.current = true here and update selected state to undefined.

This happens because transitionStart navigation even listener callback is triggered sometimes before component state is updated.
(setSelected(undefined) and Navigation.dismissModal() called simultaneously here)

isSavingRef is introduced exactly for the purpose of preventing showing confirm message after Save but it lost its function because isSavingRef.current is immediately set to false here

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

To keep isSavingRef.current = true effective, remove these lines:

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 161 in ca4289f

isSavingRef.current = false;

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 180 in ca4289f

isSavingRef.current = false;

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 197 in ca4289f

isSavingRef.current = false;

It doesn't make sense to set isSavingRef.current=false when dismiss modal after Save because component should be unmounted without confirm message.

What alternative solutions did you explore? (Optional)

remove

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 151 in ca4289f

isSavingRef.current = true;

and instead set isSavingRef.current=true right before dismiss modal. (3 places)

[ryntgh]

Proposal

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

Account – Confirmation message shown when saving Profile image

What is the root cause of that problem?

When saving the avatar, Navigation.dismissModal is called immediately after calling setImageData({...EMPTY_FILE}) or setSelected(undefined). These React state updates are asynchronous, so when the navigation transition starts, isDirty is still true because the state hasn't updated yet. Additionally, isSavingRef.current is reset to false immediately after Navigation.dismissModal, so when DiscardChangesConfirmation checks getHasUnsavedChanges, it returns true (because !isSavingRef.current && isDirty evaluates to true && true)

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Lines 150 to 199 in 5de5c92

	const onPress = useCallback(() => {
	isSavingRef.current = true;
	if (imageData.file) {
	updateAvatar(imageData.file, {
	avatar: currentUserPersonalDetails?.avatar,
	avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail,
	accountID: currentUserPersonalDetails?.accountID,
	});
	setImageData({...EMPTY_FILE});
	Navigation.dismissModal();
	isSavingRef.current = false;
	return;
	}
	if (selected && isPresetAvatarID(selected)) {
	updateAvatar(
	{
	uri: getAvatarURL(selected),
	name: selected,
	customExpensifyAvatarID: selected,
	},
	{
	avatar: currentUserPersonalDetails?.avatar,
	avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail,
	accountID: currentUserPersonalDetails?.accountID,
	},
	);
	setSelected(undefined);
	Navigation.dismissModal();
	isSavingRef.current = false;
	return;
	}
	if (!selected || !avatarCaptureRef.current) {
	isSavingRef.current = false;
	return;
	}
	// User selected a letter avatar
	avatarCaptureRef.current.capture()?.then((file) => {
	updateAvatar(file, {
	avatar: currentUserPersonalDetails?.avatar,
	avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail,
	accountID: currentUserPersonalDetails?.accountID,
	});
	setSelected(undefined);
	setImageData({...EMPTY_FILE});
	Navigation.dismissModal();
	isSavingRef.current = false;
	});
	}, [currentUserPersonalDetails?.accountID, currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.avatarThumbnail, imageData.file, selected]);

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

Keep isSavingRef.current as true until after the navigation transition completes. Remove the immediate reset of isSavingRef.current = false after Navigation.dismissModal and instead reset it in a useEffect that watches for when isDirty becomes false

    useEffect(() => {
        if (!isDirty && isSavingRef.current) {
            isSavingRef.current = false;
        }
    }, [isDirty]);

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 161 in 5de5c92

isSavingRef.current = false;

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 180 in 5de5c92

isSavingRef.current = false;

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 197 in 5de5c92

isSavingRef.current = false;

What alternative solutions did you explore? (Optional)

None

[ShridharGoel]

Proposal

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

When a user with a workspace edits their avatar and presses Save, the avatar is updated but the UI also shows a confirmation dialog saying “Are you sure you want to discard the changes you made?”.

What is the root cause of that problem?

ProfileAvatar uses the shared DiscardChangesConfirmation component to warn about unsaved edits. The component decides whether to show the dialog based on getHasUnsavedChanges, which in this case returns !isSavingRef.current && isDirty. The screen calls Navigation.dismissModal() immediately after starting the avatar save, and then flips isSavingRef back to false right away (before the modal actually closes). Because the modal is still transitioning while isSavingRef is already false, getHasUnsavedChanges continues to return true, so the discard dialog appears during the modal dismissal animation.

This bug is easiest to reproduce after a workspace is created and then user goes to Account section because the account/profile flow gets launched from workspace-related routes - ProfilePage passes Navigation.getActiveRoute() as the backTo parameter when opening the avatar modal

App/src/pages/ProfilePage.tsx

Lines 180 to 195 in 4c1d026

	onBackButtonPress={() => Navigation.goBack(navigateBackTo)}
	/>
	<View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone]}>
	<ScrollView>
	<View style={[styles.avatarSectionWrapper, styles.pb0]}>
	<PressableWithoutFocus
	style={[styles.noOutline, styles.mb4]}
	onPress={() => Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(accountID, Navigation.getActiveRoute()))}
	accessibilityLabel={translate('common.profile')}
	accessibilityRole={CONST.ROLE.BUTTON}
	disabled={!hasAvatar}
	>
	<OfflineWithFeedback pendingAction={details?.pendingFields?.avatar}>
	<Avatar
	containerStyles={[styles.avatarXLarge]}
	imageStyles={[styles.avatarXLarge]}

When the modal closes, React Navigation fires the transitionStart callbacks handled in DiscardChangesConfirmation, and since isSavingRef was reset too soon the confirmation dialog appears even though the avatar save succeeded.

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Lines 153 to 198 in 4c1d026

	if (imageData.file) {
	updateAvatar(imageData.file, {
	avatar: currentUserPersonalDetails?.avatar,
	avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail,
	accountID: currentUserPersonalDetails?.accountID,
	});
	setImageData({...EMPTY_FILE});
	Navigation.dismissModal();
	isSavingRef.current = false;
	return;
	}
	if (selected && isPresetAvatarID(selected)) {
	updateAvatar(
	{
	uri: getAvatarURL(selected),
	name: selected,
	customExpensifyAvatarID: selected,
	},
	{
	avatar: currentUserPersonalDetails?.avatar,
	avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail,
	accountID: currentUserPersonalDetails?.accountID,
	},
	);
	setSelected(undefined);
	Navigation.dismissModal();
	isSavingRef.current = false;
	return;
	}
	if (!selected || !avatarCaptureRef.current) {
	isSavingRef.current = false;
	return;
	}
	// User selected a letter avatar
	avatarCaptureRef.current.capture()?.then((file) => {
	updateAvatar(file, {
	avatar: currentUserPersonalDetails?.avatar,
	avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail,
	accountID: currentUserPersonalDetails?.accountID,
	});
	setSelected(undefined);
	setImageData({...EMPTY_FILE});
	Navigation.dismissModal();
	isSavingRef.current = false;
	});

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

1. Add a helper that dismisses the Avatar modal and only resets isSavingRef after the modal fully finishes closing by hooking into Navigation.onModalDismissedOnce. This ensures getHasUnsavedChanges stays false while dismissal happens, so DiscardChangesConfirmation never triggers during a successful save.
2. Use the helper in every save path (uploading an image, picking a preset, or capturing a letter avatar).
3. When capturing a letter avatar, guard against a null promise and keep isSavingRef true only while the promise is pending; if the capture fails, flip the flag back to false so the user can retry.

Key snippet:

const dismissAvatarModal = useCallback(() => {
    Navigation.onModalDismissedOnce(() => {
        isSavingRef.current = false;
    });
    Navigation.dismissModal();
}, []);

const onPress = useCallback(() => {
    isSavingRef.current = true;
    if (imageData.file) {
        updateAvatar(imageData.file, {...});
        setImageData({...EMPTY_FILE});
        dismissAvatarModal();
        return;
    }
    if (selected && isPresetAvatarID(selected)) {
        updateAvatar({uri: getAvatarURL(selected), ...}, {...});
        setSelected(undefined);
        dismissAvatarModal();
        return;
    }
    if (!selected || !avatarCaptureRef.current) {
        isSavingRef.current = false;
        return;
    }
    const capturePromise = avatarCaptureRef.current.capture();
    if (!capturePromise) {
        isSavingRef.current = false;
        return;
    }
    capturePromise
        .then((file) => {
            updateAvatar(file, {...});
            setSelected(undefined);
            setImageData({...EMPTY_FILE});
            dismissAvatarModal();
        })
        .catch(() => {
            isSavingRef.current = false;
        });
}, [...]);

[melvin-bot]

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

[melvin-bot]

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