p-inputotp: Integer Only attribute is not working on mobile

[Bock92]

Describe the bug

I have this code on my angular component: <p-inputotp variant="filled" [integerOnly]="true" [length]="6" [mask]="true" (onChange)="updatePinInput($event.value)" />

When the component is rendered on mobile browser the user is able to type alphabetic characters.

I have followed the doc example https://primeng.org/inputotp#integeronly but is not working

Environment

Angular 18.2.11 with PrimeNG 18

Reproducer

No response

Angular version

18.2.11

PrimeNG version

18.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.11.0

Browser(s)

All mobile browser

Steps to reproduce the behavior

No response

Expected behavior

No response

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[tolgatopkara]

https://stackblitz.com/edit/xke2hbp3-cqalpqsr?file=src%2Fapp%2Finput-otp-sample-demo.html Could you try this StackBlitz example while this issue is being solved ?

[Afkarnir]

Got this problem too on v19.1 ... It's quite blocking...

https://stackblitz.com/edit/xke2hbp3-cqalpqsr?file=src%2Fapp%2Finput-otp-sample-demo.html Could you try this StackBlitz example while this issue is being solved ?

Your example is good but backspace doesn't work...

[mkutowski]

Yup also experiencing this, on mobile you have to manually select numbers, then it keeps jumping back to alpha characters

[basven1997]

Same problem in v20

[frenzymind]

I create directive to fix this:

@Directive({
  selector: '[appNumericInput]',
})
export class NumericInputDirective implements AfterViewInit {
  private el = inject<ElementRef<HTMLElement>>(ElementRef);

  ngAfterViewInit() {
    const inputs = this.el.nativeElement.querySelectorAll('input');

    inputs.forEach(element => {
      element.setAttribute('inputmode', 'numeric');
    });
  }
}

and then

<p-inputotp
    appNumericInput
    [integerOnly]="true"
/>

[basven1997]

Problem Solved in V20.4.0 👍 https://github.com/primefaces/primeng/pull/19086

[mohamedhassan4475]

Same problem in version 21. Works in documents but doesn't work in my code.

html

ts imports :[ FormsModule, InputOtp]

value: any