InputOtp: iOS Autocomplete Jumbled

[brtinney]

Describe the bug

Specifically when tapping on the option to auto fill an OTP from Messages into the InputOtp component (at least, in Integer Only mode), the input is incorrectly inserted. It puts the first character correctly into the first field, but the rest are inserted right to left.

As in, "Your code is 123456" will show 123456 in the button to auto fill, but after tapping, the InputOtp will be filled as 165432.

Note that if you "Copy Code" from Messages and then paste the value, it works correctly, so I assume this does not have to do with the onPaste behavior. I am unfamiliar with what events are fired on the input via this auto fill mechanism.

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-kmmtvs?file=src%2FApp.vue

PrimeVue version

4.0.5

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

iOS 17.5.1 Safari

Steps to reproduce the behavior

1. Get a text message that contains a code
2. Focus InputOtp field
3. Tap the button in iOS to auto-fill the value
4. See incorrect value entered

I was able to replicate this on the showcase Integer Only InputOtp field.

Expected behavior

It should enter the value as it is shown

[brtinney]

This may be related to #6276, potentially.

[brtinney]

This may be related to #6276, potentially.

The fix for #6276 did not fix this. It still turns 123456 into 165432.