Unexpected Behavior When Entering Letters in OTP Input Example

[lmelb]

Change Type

Correction

Proposed Changes

Description:

When entering letters in the OTP input field of the example, unexpected behavior occurs:

• The active number box moves forward as expected, but no letters are visibly displayed in the boxes.
• When attempting to delete letters (the empty boxes), there is no immediate visual indication of changes. Instead, the visual update only occurs after hitting the backspace for each empty box plus one additional backspace.

Steps to Reproduce:

1. Open the OTP input field examples.
2. Enter letters instead of numbers.
3. Observe the following:
   • The active box shifts forward as each letter is entered.
   • Characters are not shown in the input field, despite the cursor moving.
4. Try to delete characters.
   • No immediate feedback is provided until all characters have been deleted, plus an extra backspace.

Done in Brave browser on Linux.
The Pattern example works as expected, but all others don't.

Expected Behavior:

• Only numbers should be accepted in the OTP input fields.
• Any invalid character (like letters) should either not be accepted or should trigger an error message.
• Deleting characters should provide immediate visual feedback.

[ieedan]

Pretty sure bits-ui just needs to go to the latest version on the docs site.

If you use the latest version of bits-ui this should work just fine in your project.

[huntabyte]

Thanks @ieedan !