fix(experience): apply form default value to smart input filed

logto-io · Aug 27, 2024 · f4063cb · f4063cb
1 parent 47d5a62
commit f4063cb
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 deletions.
diff --git a/packages/experience/src/components/IdentifierRegisterForm/index.tsx b/packages/experience/src/components/IdentifierRegisterForm/index.tsx
@@ -121,13 +121,13 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
             return true;
           },
         }}
-        render={({ field }) => (
+        render={({ field, formState: { defaultValues } }) => (
           <SmartInputField
             autoComplete="off"
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}
-            defaultValue={field.value.value}
+            defaultValue={defaultValues?.identifier?.value}
             isDanger={!!errors.identifier || !!errorMessage}
             errorMessage={errors.identifier?.message}
             enabledTypes={signUpMethods}

diff --git a/packages/experience/src/components/IdentifierSignInForm/index.tsx b/packages/experience/src/components/IdentifierSignInForm/index.tsx
@@ -122,15 +122,15 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
               : true;
           },
         }}
-        render={({ field }) => (
+        render={({ field, formState: { defaultValues } }) => (
           <SmartInputField
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}
             isDanger={!!errors.identifier || !!errorMessage}
             errorMessage={errors.identifier?.message}
             enabledTypes={enabledSignInMethods}
-            defaultValue={field.value.value}
+            defaultValue={defaultValues?.identifier?.value}
           />
         )}
       />

diff --git a/packages/experience/src/components/PasswordSignInForm/index.tsx b/packages/experience/src/components/PasswordSignInForm/index.tsx
@@ -121,15 +121,15 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
             return errorMessage ? getGeneralIdentifierErrorMessage(signInMethods, 'invalid') : true;
           },
         }}
-        render={({ field }) => (
+        render={({ field, formState: { defaultValues } }) => (
           <SmartInputField
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}
             isDanger={!!errors.identifier}
             errorMessage={errors.identifier?.message}
             enabledTypes={signInMethods}
-            defaultValue={field.value.value}
+            defaultValue={defaultValues?.identifier?.value}
           />
         )}
       />

diff --git a/packages/experience/src/components/SingleSignOnForm/index.tsx b/packages/experience/src/components/SingleSignOnForm/index.tsx
@@ -35,6 +35,11 @@ const SingleSignOnForm = ({ isTermsAndPrivacyCheckboxVisible }: Props) => {
     formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
+    defaultValues: {
+      identifier: {
+        value: ssoEmail,
+      },
+    },
   });
 
   useEffect(() => {
@@ -82,13 +87,13 @@ const SingleSignOnForm = ({ isTermsAndPrivacyCheckboxVisible }: Props) => {
               : true;
           },
         }}
-        render={({ field }) => (
+        render={({ field, formState: { defaultValues } }) => (
           <SmartInputField
             autoFocus
             className={styles.inputField}
             {...field}
             isDanger={!!errors.identifier}
-            defaultValue={ssoEmail}
+            defaultValue={defaultValues?.identifier?.value}
             errorMessage={errors.identifier?.message}
             enabledTypes={[SignInIdentifier.Email]}
           />

diff --git a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
@@ -98,12 +98,12 @@ const ForgotPasswordForm = ({ className, autoFocus, defaultValue = '', enabledTy
             return true;
           },
         }}
-        render={({ field }) => (
+        render={({ field, formState: { defaultValues } }) => (
           <SmartInputField
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}
-            defaultValue={defaultValue}
+            defaultValue={defaultValues?.identifier?.value}
             isDanger={!!errors.identifier}
             errorMessage={errors.identifier?.message}
             enabledTypes={enabledTypes}