devfolioco / react-otp-input

:heavy_check_mark: OTP Input Component for React
http://devfolioco.github.io/react-otp-input
MIT License
657 stars 425 forks source link

Allow imperative calls to focus the otp input via ref #420

Open asenmitrev opened 1 year ago

asenmitrev commented 1 year ago

Right now, to focus the input, one has to set shouldAutoFocus to true, as that internally focuses the first input. To focus again, one must reset shouldAutoFocus to false and then set it to true. There are many use cases where imperative calling of the focus() function might be required and this is a useful feature to have.

A separate problem is that this hack will only focus the input with index 0, not the activeInput.

useImperativeHandle(
  ref,
  () => ({
    focus() {
      inputRefs.current[activeInput]?.focus();
    },
  }),
  [activeInput],
);

If you consider this a viable solution I can open a PR with an implementation.

prateek3255 commented 1 year ago

Yeah @asenmitrev This makes sense can you open a PR for the same?

asenmitrev commented 1 year ago

@prateek3255 here is the PR

asenmitrev commented 11 months ago

@prateek3255 would you say this will be reviewed and merged at some point?