fix(console): select the old primary sign-in method when the primary method change (#1062)

packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx

@@ -1,5 +1,5 @@
 import { SignInMethodKey } from '@logto/schemas';
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -17,19 +17,27 @@ const signInMethods = Object.values(SignInMethodKey);
 
 const SignInMethodsForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { register, watch, control, setValue } = useFormContext<SignInExperienceForm>();
+  const { register, watch, control, getValues, setValue } = useFormContext<SignInExperienceForm>();
   const primaryMethod = watch('signInMethods.primary');
   const enableSecondary = watch('signInMethods.enableSecondary');
   const sms = watch('signInMethods.sms');
   const email = watch('signInMethods.email');
   const social = watch('signInMethods.social');
 
-  useEffect(() => {
+  const postPrimaryMethodChange = (
+    oldPrimaryMethod?: SignInMethodKey,
+    primaryMethod?: SignInMethodKey
+  ) => {
+    if (oldPrimaryMethod) {
+      // The secondary sign in method should select the old primary method by default.
+      setValue(`signInMethods.${oldPrimaryMethod}`, true);
+    }
+
     if (primaryMethod) {
       // When one of the sign-in methods has been primary, it should not be able to be secondary simultaneously.
       setValue(`signInMethods.${primaryMethod}`, false);
     }
-  }, [primaryMethod, setValue]);
+  };
 
   const secondaryMethodsFields = useMemo(
     () =>
@@ -78,7 +86,11 @@ const SignInMethodsForm = () => {
                 value: method,
                 title: t('sign_in_exp.sign_in_methods.methods', { context: method }),
               }))}
-              onChange={onChange}
+              onChange={(value) => {
+                const oldPrimaryMethod = getValues('signInMethods.primary');
+                onChange(value);
+                postPrimaryMethodChange(oldPrimaryMethod, value as SignInMethodKey);
+              }}
             />
           )}
         />