improve: user friendly interactions

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 {
@@ -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}