Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
jvegaseg opened this issue Sep 12, 2024 · 6 comments · May be fixed by #16987
Open

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

jvegaseg opened this issue Sep 12, 2024 · 6 comments · May be fixed by #16987
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Milestone
17.x

Comments

@jvegaseg
Copy link

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
@jvegaseg jvegaseg added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 12, 2024
@gitadam0
Copy link

@jvegaseg any updates?

@gquittet
Copy link

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
Copy link
Contributor

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

@luca-peruzzo
Copy link
Contributor

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

@cetincakiroglu cetincakiroglu added this to the 17.18.12 milestone Oct 26, 2024
@medbenmakhlouf medbenmakhlouf mentioned this issue Oct 27, 2024
Closed
@medbenmakhlouf
Copy link

I handled this use case in my last PR and I wrote a test fo it , you can check it in this commit : 1bde5dd

@rehdie rehdie mentioned this issue Nov 7, 2024
Open
@mehmetcetin01140 mehmetcetin01140 modified the milestones: 17.18.12, 17.18.13 Nov 13, 2024
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Nov 22, 2024
fix: handle otp keyboard filling
cd3c2ce 
Fixes primefaces#16373
@luca-peruzzo luca-peruzzo mentioned this issue Nov 22, 2024
Closed
@luca-peruzzo
Copy link
Contributor

created #16824 to fix the problem in v18

luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Nov 26, 2024
fix: handle otp keyboard filling
7b06452 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Nov 27, 2024
@luca-peruzzo
fix: handle otp keyboard filling
21db2c4 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 1, 2024
@luca-peruzzo
fix: handle otp keyboard filling
2cacedd 
Fixes primefaces#16373
@mertsincan mertsincan added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 4, 2024
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 4, 2024
fix: handle otp keyboard filling
6d2abf2 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 5, 2024
fix: handle otp keyboard filling
e5952e6 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 6, 2024
fix: handle otp keyboard filling
4bd7124 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 7, 2024
@luca-peruzzo
fix: handle otp keyboard filling
79c1b46 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 7, 2024
@luca-peruzzo
fix: handle otp keyboard filling
8445131 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 8, 2024
@luca-peruzzo
fix: handle otp keyboard filling
09f646a 
Fixes primefaces#16373
@mertsincan mertsincan modified the milestones: 17.18.13, 17.x Dec 9, 2024
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 9, 2024
fix: handle otp keyboard filling
d32308f 
Fixes primefaces#16373
@luca-peruzzo luca-peruzzo linked a pull request Dec 9, 2024 that will close this issue
Open
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 9, 2024
@luca-peruzzo
fix: handle otp keyboard filling
8484c8f 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 13, 2024
@luca-peruzzo
fix: handle otp keyboard filling
02e8991 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 16, 2024
@luca-peruzzo
fix: handle otp keyboard filling
53e3d95 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 17, 2024
@luca-peruzzo
fix: handle otp keyboard filling
da5811e 
Fixes primefaces#16373
luca-peruzzo pushed a commit to luca-peruzzo/primeng that referenced this issue Dec 17, 2024
@luca-peruzzo
fix: handle otp keyboard filling
a615fad 
Fixes primefaces#16373
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
PrimeNG
Status: No status
Milestone
17.x
Development

Successfully merging a pull request may close this issue.

fix: handle otp keyboard filling luca-peruzzo/primeng
8 participants
@gquittet @mertsincan @jvegaseg @medbenmakhlouf @luca-peruzzo @cetincakiroglu @mehmetcetin01140 @gitadam0