refactor(ui): adjust input field auto focus logic (#1099)

adjust input field auto focus logic

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>

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}

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')}

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"

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) => {

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"

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)) {

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)) {