Description
Is your feature request related to a problem? Please describe.
Yes, currently, when clearing the value attached to the OTPInput component’s value prop, the input loses focus. Although the UI visually indicates focus (via the caret and outline border around the first slot of the input), typing numbers does not work until the input is manually clicked again to regain focus.
Describe the solution you’d like
I would like the ability to reset the input value programmatically while ensuring that the input retains focus. This would provide a smoother user experience by avoiding the need to manually click on the input field again.
Describe alternatives you’ve considered
I attempted to use the .focus() and .blur() methods via a ref to manually regain focus after clearing the value. Unfortunately, this approach did not work as expected. The focus behavior remains inconsistent, and the user is still required to click on the input manually to type numbers.
Additional context
Here’s an example of the current issue:
1.Clear the OTPInput value programmatically.
2.Observe that the UI still shows the caret and outline, indicating focus.
3.Try typing numbers—nothing appears.
4.Manually click on the input field to regain focus and then resume typing.
This inconsistency in behavior can be confusing for users. A built-in feature to handle this scenario would greatly improve usability and prevent frustration.
Activity