Closed sammaxwellxyz closed 5 months ago
Thanks for opening this issue
Related issue but from Vue port https://github.com/wobsoriano/vue-input-otp/issues/9
hi @sammaxwellxyz @sadeghbarati
I understand that clicking in the specific slot index would be awesome for UX. I tried building this before.
However, this isn't a bug. It's a feature request.
Currently, the behavior you mentioned is simply not possible because the underlying native's letters are shrinked with letter-spacing:-.5em
. Not only that, but the native input is overlaying top of the whole component layout. You can't see the native input because it's transparent. Opacity is 1, but the color & caret position & selection are always transparent (except for iOS).
There are known issues limited by the current implementation and I'll reference them all in a new issue. (I'll reference this one #31 as well).
Thanks! @sammaxwellxyz
Expected Behavior
I would expected the cursor position / selected cell to be the slot that is clicked
Current Behavior
The cursor position seems to be picked as a relative position of the entire input based on where in the x direction the slot is clicked
Possible Solution
Select the slot that is clicked always
Steps to Reproduce
https://github.com/guilhermerodz/input-otp/assets/7489098/8dfd985c-cb3c-4ca6-b01a-757d43664002
Context (Environment)
Entering an OTP and thinking one can go back and edit or select a char (even if they won't be able to)
Detailed Description
not yet looked but will do
Possible Implementation
not yet looked but will do
great component btw!