From 7e582f1a40dc2138b53cfb54351e077cc3ba98d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Afra=20=E2=80=8C?= <afra@Afras-MacBook-Air.local>
Date: Sat, 1 Aug 2026 13:58:29 +0330
Subject: [PATCH] feat: auto focus for otp added

---
 src/pages/VerifyOtp/VerifyOtp.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/VerifyOtp/VerifyOtp.tsx b/src/pages/VerifyOtp/VerifyOtp.tsx
index 23aa1e5..40039ba 100644
--- a/src/pages/VerifyOtp/VerifyOtp.tsx
+++ b/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>