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

sammaxwellxyz commented 5 months ago

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

Fill out the input
click on one of the earlier slots, e.g. the first
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 commented 5 months ago

Thanks for opening this issue

Related issue but from Vue port https://github.com/wobsoriano/vue-input-otp/issues/9

guilhermerodz commented 5 months ago

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

guilhermerodz / input-otp