From 35d9145ae68db5bb23edc49c5f403f6c2ef09436 Mon Sep 17 00:00:00 2001
From: Karshilov <karshilov@foxmail.com>
Date: Fri, 8 Oct 2021 16:48:38 +0800
Subject: [PATCH] CP-209 fix: autocomplete position error (#282)

* CP-209 fix: autocomplete position error

* CP-209 fix: use ?? instead of ||

* CP-209 fix: use const value as initial value

Co-authored-by: Jagger <634750802@qq.com>
---
 .../accounts/src/pages/login/index.page.jsx   | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/accounts/src/pages/login/index.page.jsx b/packages/accounts/src/pages/login/index.page.jsx
index bf8ed2139..70e64ddbb 100644
--- a/packages/accounts/src/pages/login/index.page.jsx
+++ b/packages/accounts/src/pages/login/index.page.jsx
@@ -40,29 +40,37 @@ const Page = () => {
   const sendVerifyCode = wrapFormikSubmitFunction(verifyCode.sendVerifyCode, handleError, true);
 
   return (
-    <Formik validationSchema={formSchema} initialValues={initialValues} onSubmit={login}>
+    <Formik validationSchema={formSchema} initialValues={{ ...initialValues, loginType: 0 }} onSubmit={login}>
       {({ values, errors, touched, setFieldValue, setErrors, setTouched }) => (
         <Form>
           <FormikOption fieldName={loginType.name}>
             {({ option }) => (
               <>
-                <FormItem name={phone.name} hidden={option !== LOGIN_TYPE.VERIFY_CODE}>
-                  <Input prefix={<PhoneInputPrefix>+86</PhoneInputPrefix>} {...phone} size="large" />
-                </FormItem>
-                <FormItem name={verifyCode.name} hidden={option !== LOGIN_TYPE.VERIFY_CODE}>
-                  <VerifyInput
-                    {...verifyCode}
-                    sendVerifyCode={() => sendVerifyCode(values[phone.name], { setErrors, setTouched })}
-                    buttonDisabled={errors[phone.name] || !values[phone.name]}
-                    size="large"
-                  />
-                </FormItem>
-                <FormItem name={identifier.name} hidden={option !== LOGIN_TYPE.PASSWORD}>
-                  <Input {...identifier} size="large" />
-                </FormItem>
-                <FormItem name={password.name} hidden={option !== LOGIN_TYPE.PASSWORD}>
-                  <Input.Password {...password} size="large" />
-                </FormItem>
+                {option === LOGIN_TYPE.VERIFY_CODE && (
+                  <>
+                    <FormItem name={phone.name}>
+                      <Input prefix={<PhoneInputPrefix>+86</PhoneInputPrefix>} {...phone} size="large" />
+                    </FormItem>
+                    <FormItem name={verifyCode.name}>
+                      <VerifyInput
+                        {...verifyCode}
+                        sendVerifyCode={() => sendVerifyCode(values[phone.name], { setErrors, setTouched })}
+                        buttonDisabled={errors[phone.name] || !values[phone.name]}
+                        size="large"
+                      />
+                    </FormItem>
+                  </>
+                )}
+                {option === LOGIN_TYPE.PASSWORD && (
+                  <>
+                    <FormItem name={identifier.name}>
+                      <Input {...identifier} size="large" />
+                    </FormItem>
+                    <FormItem name={password.name}>
+                      <Input.Password {...password} size="large" />
+                    </FormItem>
+                  </>
+                )}
                 <ActionLink onClick={() => setFieldValue(loginType.name, 1 - option)}>
                   {LOGIN_TYPE_NAME[1 - option]}
                 </ActionLink>