From 1717d0b503911ae685ee1c34c294266daeb00d11 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Wed, 2 Jul 2025 01:03:24 +0330
Subject: [PATCH] add: auto focus to password and otp fields

---
 src/components/input/MultiInputField.tsx           | 3 ++-
 src/features/auth/components/StepEnterOtp.tsx      | 1 +
 src/features/auth/components/StepEnterPassword.tsx | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/input/MultiInputField.tsx b/src/components/input/MultiInputField.tsx
index 1102e0b..4d08360 100644
--- a/src/components/input/MultiInputField.tsx
+++ b/src/components/input/MultiInputField.tsx
@@ -12,7 +12,7 @@ type Props = {
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
 
 
-function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className, value = '', ...restProps }: Props) {
+function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className, autoFocus, value = '', ...restProps }: Props) {
     const values = value?.toString().split('').slice(0, maxLength);
     const inputRefs = useRef(Array.from({ length: maxLength }, () => createRef<HTMLInputElement>()));
     const [prevLength, setPrevLength] = useState(0);
@@ -58,6 +58,7 @@ function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className,
                 {inputRefs?.current?.map((ref, i) => {
                     return (
                         <input
+                            autoFocus={i == 0 && autoFocus}
                             {...restProps}
                             key={i}
                             onKeyDown={keyDown}
diff --git a/src/features/auth/components/StepEnterOtp.tsx b/src/features/auth/components/StepEnterOtp.tsx
index e714150..c468ae4 100644
--- a/src/features/auth/components/StepEnterOtp.tsx
+++ b/src/features/auth/components/StepEnterOtp.tsx
@@ -25,6 +25,7 @@ function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRu
                     <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
                 </div>
                 <OTPInputField
+                    autoFocus
                     autoComplete='one-time-code'
                     type='number'
                     inputMode='numeric'
diff --git a/src/features/auth/components/StepEnterPassword.tsx b/src/features/auth/components/StepEnterPassword.tsx
index dfa3a4c..7210ca0 100644
--- a/src/features/auth/components/StepEnterPassword.tsx
+++ b/src/features/auth/components/StepEnterPassword.tsx
@@ -23,6 +23,7 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
                     <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
                 </div>
                 <InputField
+                    autoFocus
                     autoComplete='current-password'
                     className='mt-10'
                     htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}