improve: user friendly interactions

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);
         }

src/components/button/PrimaryButton.tsx

@@ -5,7 +5,7 @@ type Props = {} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 function Button({ children, className, disabled, ...rest }: Props) {
   return (
     <div>
-      <button className={`${className} ${disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white'} transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm`} {...rest}>
+      <button disabled={disabled} className={`${className} ${disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white'} transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm`} {...rest}>
         {children}
       </button>
     </div>

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 {
@@ -63,6 +64,7 @@ function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className,
                             key={i}
                             onKeyDown={keyDown}
                             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}

src/features/auth/components/StepEnterOtp.tsx

@@ -49,7 +49,7 @@ function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber,
                     <OTPInputField
                         autoFocus
                         autoComplete='one-time-code'
-                        type='number'
+                        type='text'
                         inputMode='numeric'
                         className='mt-10 min-h-14 max-w-[304px]'
                         maxLength={6}
@@ -67,7 +67,7 @@ function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber,
                             <div>
                                 کد را دریافت نکردید؟
                                 <span className='text-primary px-1'>
-                                    <button id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='' onClick={onClick}>
+                                    <button type='button' id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='cursor-pointer' onClick={onClick}>
                                         دوباره امتحان کنید
                                     </button>
                                 </span>