feat: auto focus for otp added

src/pages/VerifyOtp/VerifyOtp.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Form, Input, Typography, message } from 'antd';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAppDispatch } from '../../utils/hooks';
 import { loginSuccess } from '../../features/auth/authSlice';
@@ -18,12 +18,19 @@ const VerifyOtp = () => {
   const dispatch = useAppDispatch();
   const [phoneNumber, setPhoneNumber] = useState('');
   const [form] = Form.useForm<VerifyOtpFormValues>();
+  const otpInputRef = useRef<any>(null);
 
   useEffect(() => {
     const storedPhoneNumber = localStorage.getItem('pending_phone_number');
     if (storedPhoneNumber) {
       setPhoneNumber(storedPhoneNumber);
     }
+
+    const timeoutId = window.setTimeout(() => {
+      otpInputRef.current?.focus();
+    }, 100);
+
+    return () => window.clearTimeout(timeoutId);
   }, []);
 
   const onFinish = async (values: VerifyOtpFormValues) => {
@@ -54,7 +61,7 @@ const VerifyOtp = () => {
             name="otp"
             rules={[{ required: true, message: 'کد تایید الزامی است' }]}
           >
-            <Input placeholder="77501" size="large" maxLength={5} />
+            <Input ref={otpInputRef} placeholder="77501" size="large" maxLength={5} />
           </Form.Item>
 
           <Form.Item>