From f390bf617592ae97a142b44003138937b4b54082 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Mon, 13 Jun 2022 16:21:53 +0800
Subject: [PATCH] refactor(ui): adjust input field auto focus logic (#1099)

adjust input field auto focus logic
---
 .../pages/SignInExperience/components/Preview.tsx  |  2 +-
 packages/ui/src/components/Input/PhoneInput.tsx    |  5 ++++-
 packages/ui/src/containers/CreateAccount/index.tsx | 14 ++++++++------
 .../containers/Passwordless/EmailPasswordless.tsx  |  6 ++++--
 .../containers/Passwordless/PhonePasswordless.tsx  |  5 ++++-
 .../ui/src/containers/UsernameSignin/index.tsx     | 14 ++++++++------
 packages/ui/src/pages/Register/index.tsx           |  6 +++---
 packages/ui/src/pages/SecondarySignIn/index.tsx    |  6 +++---
 8 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/packages/console/src/pages/SignInExperience/components/Preview.tsx b/packages/console/src/pages/SignInExperience/components/Preview.tsx
index 52c6d1b05..7c4c6061c 100644
--- a/packages/console/src/pages/SignInExperience/components/Preview.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Preview.tsx
@@ -135,7 +135,7 @@ const Preview = ({ signInExperience, className }: Props) => {
               <PhoneInfo />
             </div>
           )}
-          <iframe ref={previewRef} src="/sign-in?preview=true" />
+          <iframe ref={previewRef} src="/sign-in?preview=true" tabIndex={-1} />
         </div>
         {platform === 'mobile' && (
           <div className={styles.description}>{t('sign_in_exp.preview.mobile_description')}</div>
diff --git a/packages/ui/src/components/Input/PhoneInput.tsx b/packages/ui/src/components/Input/PhoneInput.tsx
index 8ca480437..86ccfc411 100644
--- a/packages/ui/src/components/Input/PhoneInput.tsx
+++ b/packages/ui/src/components/Input/PhoneInput.tsx
@@ -14,6 +14,8 @@ type Value = { countryCallingCode?: CountryCallingCode; nationalNumber?: string
 export type Props = {
   name: string;
   autoComplete?: AutoCompleteType;
+  // eslint-disable-next-line react/boolean-prop-naming
+  autoFocus?: boolean;
   className?: string;
   placeholder?: string;
   countryCallingCode?: CountryCallingCode;
@@ -26,6 +28,7 @@ export type Props = {
 const PhoneInput = ({
   name,
   autoComplete,
+  autoFocus,
   className,
   placeholder,
   countryCallingCode,
@@ -74,7 +77,7 @@ const PhoneInput = ({
         {countrySelector}
         <input
           ref={inputReference}
-          autoFocus
+          autoFocus={autoFocus}
           name={name}
           placeholder={placeholder}
           value={nationalNumber}
diff --git a/packages/ui/src/containers/CreateAccount/index.tsx b/packages/ui/src/containers/CreateAccount/index.tsx
index 915cf5e94..11e4bca12 100644
--- a/packages/ui/src/containers/CreateAccount/index.tsx
+++ b/packages/ui/src/containers/CreateAccount/index.tsx
@@ -17,23 +17,25 @@ import {
 
 import * as styles from './index.module.scss';
 
+type Props = {
+  className?: string;
+  // eslint-disable-next-line react/boolean-prop-naming
+  autoFocus?: boolean;
+};
+
 type FieldState = {
   username: string;
   password: string;
   confirmPassword: string;
 };
 
-type Props = {
-  className?: string;
-};
-
 const defaultState: FieldState = {
   username: '',
   password: '',
   confirmPassword: '',
 };
 
-const CreateAccount = ({ className }: Props) => {
+const CreateAccount = ({ className, autoFocus }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
   const { termsValidation } = useTerms();
   const {
@@ -79,7 +81,7 @@ const CreateAccount = ({ className }: Props) => {
   return (
     <form className={classNames(styles.form, className)}>
       <Input
-        autoFocus
+        autoFocus={autoFocus}
         className={styles.inputField}
         name="username"
         placeholder={t('input.username')}
diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
index 667906d5d..4aa0659f9 100644
--- a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
+++ b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
@@ -21,6 +21,8 @@ import * as styles from './index.module.scss';
 type Props = {
   type: UserFlow;
   className?: string;
+  // eslint-disable-next-line react/boolean-prop-naming
+  autoFocus?: boolean;
 };
 
 type FieldState = {
@@ -29,7 +31,7 @@ type FieldState = {
 
 const defaultState: FieldState = { email: '' };
 
-const EmailPasswordless = ({ type, className }: Props) => {
+const EmailPasswordless = ({ type, autoFocus, className }: Props) => {
   const { setToast } = useContext(PageContext);
   const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
@@ -97,7 +99,7 @@ const EmailPasswordless = ({ type, className }: Props) => {
     <>
       <form className={classNames(styles.form, className)}>
         <Input
-          autoFocus
+          autoFocus={autoFocus}
           className={styles.inputField}
           name="email"
           autoComplete="email"
diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
index 0a2b8b4d8..dfcfffa12 100644
--- a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
+++ b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
@@ -20,6 +20,8 @@ import * as styles from './index.module.scss';
 
 type Props = {
   type: UserFlow;
+  // eslint-disable-next-line react/boolean-prop-naming
+  autoFocus?: boolean;
   className?: string;
 };
 
@@ -29,7 +31,7 @@ type FieldState = {
 
 const defaultState: FieldState = { phone: '' };
 
-const PhonePasswordless = ({ type, className }: Props) => {
+const PhonePasswordless = ({ type, autoFocus, className }: Props) => {
   const { setToast } = useContext(PageContext);
   const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
@@ -118,6 +120,7 @@ const PhonePasswordless = ({ type, className }: Props) => {
           placeholder={t('input.phone_number')}
           countryCallingCode={phoneNumber.countryCallingCode}
           nationalNumber={phoneNumber.nationalNumber}
+          autoFocus={autoFocus}
           countryList={countryList}
           {...register('phone', phoneNumberValidation)}
           onChange={(data) => {
diff --git a/packages/ui/src/containers/UsernameSignin/index.tsx b/packages/ui/src/containers/UsernameSignin/index.tsx
index 847d8bd57..61592c1ae 100644
--- a/packages/ui/src/containers/UsernameSignin/index.tsx
+++ b/packages/ui/src/containers/UsernameSignin/index.tsx
@@ -16,21 +16,23 @@ import { requiredValidation } from '@/utils/field-validations';
 
 import * as styles from './index.module.scss';
 
+type Props = {
+  className?: string;
+  // eslint-disable-next-line react/boolean-prop-naming
+  autoFocus?: boolean;
+};
+
 type FieldState = {
   username: string;
   password: string;
 };
 
-type Props = {
-  className?: string;
-};
-
 const defaultState: FieldState = {
   username: '',
   password: '',
 };
 
-const UsernameSignin = ({ className }: Props) => {
+const UsernameSignin = ({ className, autoFocus }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
   const { termsValidation } = useTerms();
   const {
@@ -85,7 +87,7 @@ const UsernameSignin = ({ className }: Props) => {
   return (
     <form className={classNames(styles.form, className)}>
       <Input
-        autoFocus
+        autoFocus={autoFocus}
         className={styles.inputField}
         name="username"
         autoComplete="username"
diff --git a/packages/ui/src/pages/Register/index.tsx b/packages/ui/src/pages/Register/index.tsx
index f41e84f5d..041c9fbf5 100644
--- a/packages/ui/src/pages/Register/index.tsx
+++ b/packages/ui/src/pages/Register/index.tsx
@@ -19,14 +19,14 @@ const Register = () => {
 
   const registerForm = useMemo(() => {
     if (method === 'sms') {
-      return <PhonePasswordless type="register" />;
+      return <PhonePasswordless autoFocus type="register" />;
     }
 
     if (method === 'email') {
-      return <EmailPasswordless type="register" />;
+      return <EmailPasswordless autoFocus type="register" />;
     }
 
-    return <CreateAccount />;
+    return <CreateAccount autoFocus />;
   }, [method]);
 
   if (!['email', 'sms', 'username'].includes(method)) {
diff --git a/packages/ui/src/pages/SecondarySignIn/index.tsx b/packages/ui/src/pages/SecondarySignIn/index.tsx
index d5ab02124..6de706732 100644
--- a/packages/ui/src/pages/SecondarySignIn/index.tsx
+++ b/packages/ui/src/pages/SecondarySignIn/index.tsx
@@ -19,14 +19,14 @@ const SecondarySignIn = () => {
 
   const signInForm = useMemo(() => {
     if (method === 'sms') {
-      return <PhonePasswordless type="sign-in" />;
+      return <PhonePasswordless autoFocus type="sign-in" />;
     }
 
     if (method === 'email') {
-      return <EmailPasswordless type="sign-in" />;
+      return <EmailPasswordless autoFocus type="sign-in" />;
     }
 
-    return <UsernameSignin />;
+    return <UsernameSignin autoFocus />;
   }, [method]);
 
   if (!['email', 'sms', 'username'].includes(method)) {