search

guilhermerodz / input-otp

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

[BUG] Line appears on the left when OTP is fully populated on iOS #75

Closed marcusmichaels closed 5 days ago

marcusmichaels commented 1 week ago

Version of the library: latest

Expected Behavior

When the OTP is complete, no line should appear on the far left.

Current Behavior

On iOS Safari, when the OTP is complete a line appears on the far left, it disappears if you remove a character, and it reappears on completion. See below:

Screenshot 2024-11-06 at 17 07 34

https://github.com/user-attachments/assets/82aa62c5-dafd-4041-9530-1be06fdc6a7a

Possible Solution

I've tried to mask it but to no avail – it appears to be something to do with the iOS native caret (but I could be wrong)

Steps to Reproduce

  1. Visit https://ui.shadcn.com/docs/components/input-otp in an iOS browser (Chrome or Safari)
  2. Make sure the theme is light mode so you can see the line
  3. Fill out any of the OTP examples – note that on the last char entered a line appears to the left of the container

Context (Environment)

I'm putting together an OTP component and recently moved from an in-house version to shadcn for consistency. It's all good on desktop but on iOS (which is where the majority of our customers are) it shows the little line before the code is submitted.

guilhermerodz commented 5 days ago

Hey @marcusmichaels it seems iOS always show up the selection; it's not possible to hide it. See https://github.com/guilhermerodz/input-otp/issues/32

marcusmichaels commented 5 days ago

Another victim of an iOS quirk 😅😭, thanks for looking into it anyway