Component: Otp Input Component does not focus next element when TAB is pressed in last input

[rehdie]

Describe the bug

When all input fields are filled and you want to move to the next form-element via TAB-key, nothing happens.

The reason is, that the method onKeyDown calls preventDefault in this case,

As a workaround I've done the following:

<p-inputOtp ...>
   <ng-template  pTemplate="input" let-token let-events="events">
      <input 
         pInputText
         (keydown)="onOtpKeydown(events, $event)"
         ....>
   </ng-template>
</p-inputOtp>

And in the component class:

 onOtpKeydown(templateEvents: InputOtpTemplateEvents, event: KeyboardEvent) {
    if(event.key==="Tab") {
        return;
    }
    templateEvents.keydown(event);
  }

This solution also allows the TAB-key to navigate between the multiple-input-fields. If you don't want that, you would have to pass the index as well and do that on the last field only.

Environment

Windows 10
Angular 18.2.0
MS Edge 128.0.2739.63
Firefox 128.2.0esr

Reproducer

No response

Angular version

Angular 18.2.0

PrimeNG version

17.18.10

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.18.0

Browser(s)

MS Edge 128.0.2739.63

Steps to reproduce the behavior

No response

Expected behavior

No response