Allow imperative focus on input via ref #422
Conversation
|
Hey @asenmitrev Sorry for the delay in reviewing here, can you resolve the conflicts here I would give it a run again and then will merge if it looks good |
src/index.tsx
Outdated
| inputRef?.focus(); | ||
| }, | ||
| }), | ||
| [value, activeInput] |
There was a problem hiding this comment.
Why have we included both value and activeInput if we're only using value here in the method?
src/index.tsx
Outdated
| ref, | ||
| () => ({ | ||
| focus() { | ||
| const inputRef = inputRefs.current[value.length] ?? inputRefs.current[0]; |
There was a problem hiding this comment.
Also why are we relying on the length of the value, any reason for not doing it like this:
| const inputRef = inputRefs.current[value.length] ?? inputRefs.current[0]; | |
| const inputRef = inputRefs.current[activeInput] |
There was a problem hiding this comment.
I tried using activeInput but the behaviour was not what seems like the best UX. Sometimes, the active input is not the first unfilled input, but a filled input before. So you would overwrite the last value of the otp when clicking focus. Using the value length allows to always focus the first unfilled input.
3 participants
What does this PR do?
Enables imperative focus on the otp input for the first empty input.
Any background context you want to provide?
Imperative focus is needed often when focusing inputs from outside the component. It is one of the most common uses of imperative programming in React, so it makes sense to enable it.