add focus

src/pages/auth/components/LoginStep1.tsx

@@ -39,7 +39,7 @@ const LoginStep1: FC = () => {
     })
 
     return (
-        <div>
+        <form onSubmit={formik.handleSubmit}>
             <div className='mt-5'>
                 <h2 className='text-2xl font-bold'>
                     خوش آمدید
@@ -56,6 +56,7 @@ const LoginStep1: FC = () => {
                     type='tel'
                     autoComplete='tel'
                     inputMode='tel'
+                    autoFocus
                     className='dltr text-left'
                     name='phone_email'
                     onChange={formik.handleChange}
@@ -75,10 +76,10 @@ const LoginStep1: FC = () => {
             <Button
                 label={'ادامه'}
                 className='mt-8'
-                onClick={() => formik.handleSubmit()}
+                type='submit'
                 isLoading={loginWithOtp.isPending || checkHasAccount.isPending}
             />
-        </div>
+        </form>
     )
 }
 

src/pages/auth/components/LoginStep2.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect } from 'react'
+import { type FC, useEffect, useRef } from 'react'
 import { type OtpVerifyType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
@@ -20,6 +20,7 @@ const LoginStep2: FC = () => {
     const { value, reset } = useCountDown(2, true)
     const otpVerify = useOtpVerify()
     const loginWithOtp = useLoginWithOtp()
+    const firstOtpInputRef = useRef<HTMLInputElement | null>(null)
 
     const formik = useFormik<OtpVerifyType>({
         initialValues: {
@@ -51,6 +52,14 @@ const LoginStep2: FC = () => {
         },
     })
 
+    useEffect(() => {
+        const frameId = requestAnimationFrame(() => {
+            firstOtpInputRef.current?.focus()
+        })
+
+        return () => cancelAnimationFrame(frameId)
+    }, [])
+
     useEffect(() => {
         // بررسی پشتیبانی از Web OTP API
         if (!("OTPCredential" in window)) return;
@@ -96,7 +105,7 @@ const LoginStep2: FC = () => {
 
 
     return (
-        <div>
+        <form onSubmit={formik.handleSubmit}>
             <div className='mt-5'>
                 <h2 className='lg:text-2xl font-bold'>
                     کد تایید را وارد کنید
@@ -126,14 +135,24 @@ const LoginStep2: FC = () => {
                         numInputs={5}
                         inputType='tel'
                         onChange={(otp: string) => formik.setFieldValue('otp', otp)}
-                        renderInput={(props) =>
+                        renderInput={(props, index) => {
-                            <input
+                            const { ref, ...inputProps } = props
-                                {...props}
+
-                                type='tel'
+                            return (
-                                autoComplete="one-time-otp"
+                                <input
-                                inputMode="numeric"
+                                    {...inputProps}
-                                className='w-full h-[50px] min-w-[50px] flex-1 mx-2  bg-white border border-border rounded-[10px]' />
+                                    ref={(element) => {
-                        }
+                                        ref(element)
+                                        if (index === 0) {
+                                            firstOtpInputRef.current = element
+                                        }
+                                    }}
+                                    type='tel'
+                                    autoComplete="one-time-otp"
+                                    inputMode="numeric"
+                                    className='w-full h-[50px] min-w-[50px] flex-1 mx-2  bg-white border border-border rounded-[10px]' />
+                            )
+                        }}
                     />
                 </div>
 
@@ -166,7 +185,7 @@ const LoginStep2: FC = () => {
             <Button
                 label={'ورود'}
                 className='mt-8'
-                onClick={() => formik.handleSubmit()}
+                type='submit'
                 isLoading={otpVerify.isPending}
             />
 
@@ -176,7 +195,7 @@ const LoginStep2: FC = () => {
                 </p>
                 <img src={ArrowLeftIcon} className='w-5' />
             </div> */}
-        </div>
+        </form>
     )
 }