[Bug]: Input OTP blocked by password manager

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

https://ui.shadcn.com

MIT License

62.86k stars 3.54k forks source link

[Bug]: Input OTP blocked by password manager #2939

Open julianriise opened 3 months ago

julianriise commented 3 months ago

Describe the bug

When typing in the digits, 1Password overlaps the last digit.

Affected component/components

Input OTP

How to reproduce

Open 1Password on Mac
Go to https://ui.shadcn.com/docs/components/input-otp
Type in the digits in the example component

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Arc Browser, MacOS

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

guilhermerodz commented 3 months ago

Hi @julianriise. I think it's not a good choice for 1Password to place an overlay over inputs. Happily, they offer an option to avoid this by adding data-1p-ignore to the <input ... /> element. I'm testing this out and will get back to you.

guilhermerodz commented 3 months ago

Confirmed. According to 1Password, just add data-1p-ignore to your input and the 1Password overlay should be hidden.

https://github.com/shadcn-ui/ui/assets/10366880/d79aaf72-dff5-439d-865c-aaf1bdde932c

Regarding the underlying library/primitive input-otp: I'm deciding if I should make data-1p-ignore a default. And then allow developers to opt-out of it with a allowPasswordManagers flag?

What if I ship a v1.0.2 update that blocks PMs by default, and then add an opt-out prop?

EDIT: decided not to go with forcefully blocking password managers. You can still block them with official attributes such as data-lpignore for lastpass or data-1p-ignore for 1Password, etc.

julianriise commented 3 months ago

Yeah, that seems like an excellent solution👍🏼

guilhermerodz commented 3 months ago

guilhermerodz/input-otp@8f4e92fa777dc7282fcfbe4b81dbbf632038fb31

Solved for nearly all password managers! 🎉

automatic support for Lastpass, 1Password, Bitwarden and Dashlane.
auto-detection for others PWMs (works majority of the time)
detects badge collisions and fallbacks to original position when needed

please run

npm install input-otp@latest

pushPasswordManagerStrategy?:
    | 'increase-width'
    | 'none'

@julianriise

guilhermerodz commented 3 months ago

hi @julianriise is it solved by now?