[Feature Request] v-otp-input: iOS/Android autofill

[RadarCZ]

Problem to solve

Quality-of-life improvement of using this component on pages in mobile browsers. When there is some kind of one-time-passcode verification over SMS, iPhone and Android have some kind of functionality to paste code from the SMS.

Proposed solution

Usually this is done with html input attribute autocomplete="one-time-code"

[KaelWD]

https://web.dev/web-otp/
https://web-otp.glitch.me/
https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/get
https://developer.mozilla.org/en-US/docs/Web/API/OTPCredential

Can you tell me what events are triggered on iOS when a value is entered with this enabled? (just on a <input> is fine)

[RadarCZ]

Thanks for the links, found out we probably send the SMS in wrong format - will fix that and let you know.
As for the iOS events: I'm currently unable to connect debugger to the iOS device because I don't have a MacOS or Windows device on hand and cannot manage inspect.dev, ios_webkit_debug_proxy or remotedebug-ios-webkit-adapter to work on my linux laptop, which is also in the progress of solving.

I'll keep this issue updated when I manage to achieve progress in any of the points given.

[RadarCZ]

Update for the SMS format: it kinda worked - iOS asked to fill the input with the code from the message, but when doing so, the second "segment" input is focused instead of the VOtpInput emitting finished event.

[KaelWD]

iOS asked to fill the input with the code from the message

When you do this with a plain <input> element, does it fire a paste event, change, or just input?

[RadarCZ]

With basic <input> the event is just input, change is triggered on input blur (with the blur event right after it) and paste doesn't fire in this scenario.

[RadarCZ]

In Safari 15.4 (iOS 15.4) v-otp-input with autocomplete="one-time-code" works as expected - when the message with the code is received, keyboard suggests filling it, when clicking on the suggestion, it fills all of the segments and emits finish. Before emitting finish the input event is triggered 6 times (length attribute of the <v-otp-input>), each time with more of the numbers from the received code.

So when the code is 123456 it emits following events (iOS Safari)

1. input with parameter 1
2. input with parameter 12
3. input with parameter 123
4. input with parameter 1234
5. input with parameter 12345
6. input with parameter 123456
7. finish

While Android Chrome and iOS Chrome/Firefox (which we tested) are only emitting the first input with just the first number from the code.