fix: reset username edit field to current username when cancelling change

Author: Bentroen

web/src/modules/shared/components/layout/UserMenu.tsx

@@ -36,6 +36,7 @@ export const UserMenu = ({ userData }: { userData: LoggedUserData }) => {
     handleSubmit,
     formState: { isSubmitting, errors },
     register,
+    reset,
   } = useForm<FormValues>();
 
   const onSubmit: SubmitHandler<FormValues> = async (data) => {
@@ -84,6 +85,12 @@ export const UserMenu = ({ userData }: { userData: LoggedUserData }) => {
     }
   }, [errors.username?.message]);
 
+  useEffect(() => {
+    if (isEditingUsername) {
+      reset({ username: name });
+    }
+  }, [isEditingUsername, name, reset]);
+
   return (
     <Popover onOpenChange={() => setIsEditingUsername(false)}>
       <PopoverTrigger>