guilhermerodz / input-otp

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

Fix IOS paste on context menu #7

Closed brunoeduardodev closed 5 months ago

brunoeduardodev commented 6 months ago

This solution is still in exploration, and consists in two steps:

1- having the input element always reachable, but with invisible characters, cursor, etc. 2- having a ghost character that will allow ios to show the "paste" button when long pressing the input element before inputing any value

About the ghost character

Just by having the first item of this PR will allow the input to be copy/pastable in mobile devices, however, a long press action on the input will only show the "paste" option if:

1- the input is already focused. 2- the input already has some content in it.

since we can't guarantee that the input will always be focused before the user interacts with it, IF we want to not have the necessity of having the input focused before showing the "paste" option, a existence of a ghost character can solve this problem.

I would personally like to not have to fallback in this kind of solution since it will add more complexity when handling the input selection range, the value attached to input, the input on change event, and copying (as we can see on the files changed at time of write)

anyways, here's a solution that seems to bring a nice UX to the end user:

vercel[bot] commented 6 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
input-otp-x1vw ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 20, 2024 2:07am
rodz-input-otp ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 20, 2024 2:07am
brunoeduardodev commented 5 months ago

closing since it's implemented in the main branch now 🎉