search

guilhermerodz / input-otp

One time passcode Input. Accessible & unstyled.
https://input-otp.rodz.dev
MIT License
2.35k stars 47 forks source link

Limitations/issues caused by core implementation #32

Open guilhermerodz opened 5 months ago

guilhermerodz commented 5 months ago

How the library works (fundamentals)

input-otp is an accessible input that renders:

In short: it's 1 underlying native input as an overlay on top of N layers of render.

However, the core implementation has some limitations. The known limits are:

Visual (UI) limitations

iOS selections are always visible.

PS: iOS copy-paste touch callout menus can't be triggered if the selection is <1px in width.

iOS don't provide a way to style input::selection in CSS, we end up with a non-transparent selection when at least 1 char of the input is selected within the underlying input. I'm applying super negative letter-spacing to ensure the visible selection becomes as thin as possible (=1px) but can't render smaller than 1px otherwise iOS touch callout doesn't pop up.

https://github.com/guilhermerodz/input-otp/assets/10366880/0157624c-a8c9-406a-8cb8-e5bcce3335e6

This would barely go noticed in a normal OTP flow where the user types in an OTP code or autofills it from his password manager. The user wouldn't even notice the selection as developers usually choose to automatically submit the form using <input onComplete prop so there's no time to look at 1px selections.

[Mobile] Firefox shows quote markers in left+right corners of the selection.

TODO: add image

Behavior (UX) limitations

Click/touch/touchmove-to-select slots

The user cannot click/touch/hold-move and select a slot since the native input's letters are shrinked into a ~1px thin width due to added CSS letter-spacing:-.5em, resulting in all characters being a ultra thin condensed area. Unfortunately, the user cannot manually choose his selection by mouse/touch, only by keyboard.

The expected behavior would be:

https://github.com/guilhermerodz/input-otp/assets/10366880/ee019197-a9e6-422e-a8ea-2b1220168430

The video above has been a feature request.

Related issues by the community are #31

codercodingthecode commented 4 months ago

Thanks for providing the library. I opened a PR to address the visible caret issue. [link above] Simple fix. Ran into this issue earlier today.