From b18d22e1f9dea67bcf8c2c5f201d38d63394a77a Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 31 Oct 2022 12:17:57 +0800
Subject: [PATCH] fix(console): provide default values for fields in sign up
 and sign in forms (#2279)

---
 .../tabs/SignUpAndSignInTab/SignInForm.tsx    | 20 ++++++++++++++-----
 .../SignUpAndSignInTab/SocialSignInForm.tsx   |  1 +
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignInForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignInForm.tsx
index facd3f7dd..8cbec8cb4 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignInForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignInForm.tsx
@@ -1,4 +1,5 @@
-import { Controller, useFormContext } from 'react-hook-form';
+import { SignUpIdentifier } from '@logto/schemas';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import FormField from '@/components/FormField';
@@ -11,10 +12,18 @@ import * as styles from './index.module.scss';
 const SignInForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
-  const { control, watch } = useFormContext<SignInExperienceForm>();
-  const signUpIdentifier = watch('signUp.identifier');
-  const requirePassword = watch('signUp.password');
-  const requireVerificationCode = watch('signUp.verify');
+  const { control } = useFormContext<SignInExperienceForm>();
+  /**
+   * Note: `watch` may not return the default value, use `useWatch` instead.
+   * Reference: https://github.com/react-hook-form/react-hook-form/issues/1332
+   */
+  const signUpIdentifier = useWatch({
+    control,
+    name: 'signUp.identifier',
+    defaultValue: SignUpIdentifier.Username,
+  });
+  const requirePassword = useWatch({ control, name: 'signUp.password', defaultValue: false });
+  const requireVerificationCode = useWatch({ control, name: 'signUp.verify', defaultValue: false });
 
   return (
     <>
@@ -26,6 +35,7 @@ const SignInForm = () => {
         <Controller
           control={control}
           name="signIn.methods"
+          defaultValue={[]}
           render={({ field: { value, onChange } }) => {
             return (
               <SignInMethodEditBox
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SocialSignInForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SocialSignInForm.tsx
index 3ee76df29..015f8b347 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SocialSignInForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SocialSignInForm.tsx
@@ -23,6 +23,7 @@ const SocialSignInForm = () => {
         </div>
         <Controller
           control={control}
+          defaultValue={[]}
           name="socialSignInConnectorTargets"
           render={({ field: { value, onChange } }) => {
             return <SocialConnectorEditBox value={value} onChange={onChange} />;