p-inputOtp does not paste code sent by SMS, only sets the first digit

jvegaseg commented 3 weeks ago

Describe the bug

Using a mobile and when an OTP is sent by SMS, the keyboard suggest the code, if your select the suggestion, only the first char is copied in the fields (6-digits).

I do not know it it related to autocomplete="one-time-code" attribute but p-inputOtp is not using it.

Environment

A web page using Chrome navigator on an iphone mobile.

Reproducer

No response

Angular version

18.2.4

PrimeNG version

17.18.10

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

v20.14.0

Browser(s)

Chrome 128.0.6613.120

Steps to reproduce the behavior

No response

Expected behavior

6-digits code filled in the p-inputOtp field

gitadam0 commented 2 weeks ago

@jvegaseg any updates?

gquittet commented 1 week ago

Hello @gitadam0 @jvegaseg 👋

I ended up with this solution and it works well on my side:

<p-inputOtp [formControl]="otpInput" [integerOnly]="true" [length]="6">
  <ng-template pTemplate="input" let-token let-events="events">
    <input
      pInputText
      type="text"
      [maxLength]="1"
      (input)="events.input($event)"
      (paste)="events.paste($event)"
      [attr.value]="token"
      autocomplete="one-time-code"
    />
  </ng-template>
</p-inputOtp>

luca-peruzzo commented 6 days ago

this bug is also present in primeng 18.0.0-beta.2 inputotp

primefaces / primeng