search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.87k stars 1.19k forks source link

InputOtp: iOS Autocomplete Jumbled #6317

Open brtinney opened 2 weeks ago

brtinney commented 2 weeks ago

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 commented 2 weeks ago

This may be related to #6276, potentially.