[BUG] Unexpected gray bar appears on the left of OTP input on Safari (iPhone)

[nsutnghiadoan]

Hi team,

I encountered a UI issue when using this OTP input library on Safari (iPhone).

When entering the full OTP, a gray vertical bar appears on the left side of the first digit. At first, I thought this was caused by my own CSS, so I spent quite some time debugging and even removed all of my custom styles. However, the issue still persisted.

To verify, I tested directly on your demo site and found that the same issue occurs there as well — especially when removing border and outline styles.

This made it quite confusing, as it looks like a rendering artifact rather than intentional UI.

• Additional details
  Platform: Safari on iPhone (iOS)
  Behavior:
  After entering full OTP → gray vertical bar appears on the left
  Looks similar to a caret/selection artifact
  I also noticed:
  The bar becomes more noticeable depending on styling
  It resembles the hidden input’s caret or layout behavior

Temporary workaround
I was able to fix it on my side by:

font-size: 16px;

on the hidden input element.
After reducing the font size, the gray bar no longer appears.

It would be great if you could take a look at this issue.
Thanks for the awesome library!

[laialopezz]

Hi @nsutnghiadoan , I found the same issue. I ended just using opacity: 0 !important on the input itself and it worked nice!

[guilhermerodz]

Hi @nsutnghiadoan , I found the same issue. I ended just using opacity: 0 !important on the input itself and it worked nice!

Thanks to everyone trying to fix this issue @nsutnghiadoan

Planning to come up with a new version addressing tiny little bugs which only happen on specific environments.

[laialopezz]

Nice! Btw I just realized a closed PR and ended up removing the opacity: 0 (and adjusting the padding), because it breaks copy/pasting feature.