When OTP is wrong I want to set focus on first input

[Jayrathod1234]

In the current implementation of the OTP input component, when a user submits an incorrect OTP, the focus remains on the last input field (input tab 6) instead of resetting to the first input field (input tab 1). This behavior can confuse users, as they may need to start over but find themselves unable to easily re-enter their OTP without manually clicking on the first input.

[DieserMerlin]

I don't know if this is still an issue for you, because it has been some time, but I found a solution to this:

type OTPInputRef = {focus: (index: number) => void};

export const EnhancedOTPInput = forwardRef<OTPInputRef, OTPInputProps>(
  (props, ref) => {
    const [inputRefs] = useState<{[key: number]: HTMLInputElement | null}>({});
    const focus = (pos: number) => inputRefs[pos]?.focus();

    useImperativeHandle(ref, () => ({focus}));

    return (
      <OTPInput
        {...props}
        renderInput={(inputProps, index) => (
          <input
            {...inputProps}
            ref={ref => {
              inputProps.ref(ref);
              inputRefs[index] = ref;
            }}
          />
        )}
      />
    );
  }
);

You can then do this:

const inputRef = useRef<OTPInputRef>(null);

useEffect(() => {
  inputRef.current?.focus(0); // 0 for first input, 1 for second etc...
}, [someDependency]);

return <EnhancedOTPInput ref={inputRef} />;

Hope this helps