add focus

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'
@@ -19,6 +19,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: {
@@ -48,6 +49,14 @@ const LoginStep2: FC = () => {
         },
     })
 
+    useEffect(() => {
+        const frameId = requestAnimationFrame(() => {
+            firstOtpInputRef.current?.focus()
+        })
+
+        return () => cancelAnimationFrame(frameId)
+    }, [])
+
     useEffect(() => {
         // بررسی پشتیبانی از Web OTP API
         if (!("OTPCredential" in window)) return;
@@ -93,7 +102,7 @@ const LoginStep2: FC = () => {
 
 
     return (
-        <div>
+        <form onSubmit={formik.handleSubmit}>
             <div className='mt-5'>
                 <h2 className='lg:text-2xl font-bold'>
                     کد تایید را وارد کنید
@@ -123,14 +132,24 @@ const LoginStep2: FC = () => {
                         numInputs={5}
                         inputType='tel'
                         onChange={(otp: string) => formik.setFieldValue('otp', otp)}
-                        renderInput={(props) =>
-                            <input
-                                {...props}
-                                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]' />
-                        }
+                        renderInput={(props, index) => {
+                            const { ref, ...inputProps } = props
+
+                            return (
+                                <input
+                                    {...inputProps}
+                                    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>
 
@@ -163,7 +182,7 @@ const LoginStep2: FC = () => {
             <Button
                 label={'ورود'}
                 className='mt-8'
-                onClick={() => formik.handleSubmit()}
+                type='submit'
                 isLoading={otpVerify.isPending}
             />
 
@@ -173,7 +192,7 @@ const LoginStep2: FC = () => {
                 </p>
                 <img src={ArrowLeftIcon} className='w-5' />
             </div> */}
-        </div>
+        </form>
     )
 }