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

[marcusmichaels]

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:

Screen.Recording.2024-11-06.at.16.34.17.mov

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]

Hey @marcusmichaels it seems iOS always show up the selection; it's not possible to hide it. See #32

[marcusmichaels]

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