[BUG] - Clicking on single slot moves cursor to relative position in the whole input

[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

Screen.Recording.2024-03-11.at.10.32.45.mov

1. Fill out the input
2. click on one of the earlier slots, e.g. the first
3. watch the cursor move

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!

[sadeghbarati]

Thanks for opening this issue

Related issue but from Vue port
wobsoriano/vue-input-otp#9

[guilhermerodz]

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