diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 87ed91e..646be9d 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -58,6 +58,7 @@ function AuthIndex({ }: Props) { useEffect(() => { if (step === AUTH_STEP.ENTER_OTP) { + setOtp(''); console.log("REQUEST OTP") runOtpRequest(number); } diff --git a/src/components/button/PrimaryButton.tsx b/src/components/button/PrimaryButton.tsx index 7c872b4..922f861 100644 --- a/src/components/button/PrimaryButton.tsx +++ b/src/components/button/PrimaryButton.tsx @@ -5,7 +5,7 @@ type Props = {} & React.ButtonHTMLAttributes; function Button({ children, className, disabled, ...rest }: Props) { return (
-
diff --git a/src/components/input/MultiInputField.tsx b/src/components/input/MultiInputField.tsx index 70e1943..2762794 100644 --- a/src/components/input/MultiInputField.tsx +++ b/src/components/input/MultiInputField.tsx @@ -38,6 +38,7 @@ function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className, if (val.length >= maxLength && index < maxLength) { i = maxLength - 1; } + inputRefs.current[i]?.current?.setSelectionRange(1, 1) inputRefs.current[i]?.current?.focus(); setPrevLength(() => i) } else { @@ -62,7 +63,8 @@ function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className, {...restProps} key={i} onKeyDown={keyDown} - onChange={onChange} + onChange={onChange} + onFocus={() => ref.current?.setSelectionRange(ref.current.value.length, ref.current.value.length)} name={`${htmlFor}-data-${i}`} readOnly={i != maxLength - 1 && Math.max(0, values?.length) != i && prevLength != i} ref={ref} diff --git a/src/features/auth/components/StepEnterOtp.tsx b/src/features/auth/components/StepEnterOtp.tsx index a9ac04d..14acff3 100644 --- a/src/features/auth/components/StepEnterOtp.tsx +++ b/src/features/auth/components/StepEnterOtp.tsx @@ -49,7 +49,7 @@ function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber, کد را دریافت نکردید؟ -