add: auto focus to password and otp fields

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}

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'

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}