[FIX] Profile picture changing with username (#19992)

client/components/avatar/UserAvatarEditor.js

@@ -27,7 +27,7 @@ function UserAvatarSuggestions({ suggestions, setAvatarObj, setNewAvatarSource,
 	</Margins>;
 }
 
-export function UserAvatarEditor({ username, setAvatarObj, suggestions, disabled, etag }) {
+export function UserAvatarEditor({ currentUsername, username, setAvatarObj, suggestions, disabled, etag }) {
 	const t = useTranslation();
 	const [avatarFromUrl, setAvatarFromUrl] = useState('');
 	const [newAvatarSource, setNewAvatarSource] = useState();
@@ -57,7 +57,7 @@ export function UserAvatarEditor({ username, setAvatarObj, suggestions, disabled
 	return <Box display='flex' flexDirection='column' fontScale='p2'>
 		{t('Profile_picture')}
 		<Box display='flex' flexDirection='row' mbs='x4'>
-			<UserAvatar size='x124' url={url} username={username} etag={etag} style={{ objectFit: 'contain' }} mie='x4'/>
+			<UserAvatar size='x124' url={url} username={currentUsername} etag={etag} style={{ objectFit: 'contain' }} mie='x4'/>
 			<Box display='flex' flexDirection='column' flexGrow='1' justifyContent='space-between' mis='x4'>
 				<Box display='flex' flexDirection='row' mbs='none'>
 					<Margins inline='x4'>

client/views/account/AccountProfileForm.js

@@ -130,8 +130,8 @@ function AccountProfileForm({ values, handlers, user, settings, onSaveStateChang
 
 	return <FieldGroup is='form' autoComplete='off' onSubmit={handleSubmit} {...props}>
 		{useMemo(() => <Field>
-			<UserAvatarEditor etag={user.avatarETag} username={username} setAvatarObj={handleAvatar} disabled={!allowUserAvatarChange} suggestions={avatarSuggestions}/>
-		</Field>, [username, handleAvatar, allowUserAvatarChange, avatarSuggestions, user.avatarETag])}
+			<UserAvatarEditor etag={user.avatarETag} currentUsername={user.username} username={username} setAvatarObj={handleAvatar} disabled={!allowUserAvatarChange} suggestions={avatarSuggestions}/>
+		</Field>, [username, user.username, handleAvatar, allowUserAvatarChange, avatarSuggestions, user.avatarETag])}
 		<Box display='flex' flexDirection='row' justifyContent='space-between'>
 			{useMemo(() => <Field mie='x8' flexShrink={1}>
 				<Field.Label flexGrow={0}>{t('Name')}</Field.Label>

client/views/admin/users/EditUser.js

@@ -102,7 +102,7 @@ export function EditUser({ data, roles, ...props }) {
 
 	const canSaveOrReset = hasUnsavedChanges || avatarObj;
 
-	const prepend = useMemo(() => <UserAvatarEditor username={data.username} etag={data.avatarETag} setAvatarObj={setAvatarObj}/>, [data.username, data.avatarETag]);
+	const prepend = useMemo(() => <UserAvatarEditor currentUsername={data.username} username={values.username} etag={data.avatarETag} setAvatarObj={setAvatarObj}/>, [data.username, data.avatarETag, values.username]);
 
 	const append = useMemo(() => <Field>
 		<Field.Row>