P-dropdown: tab key does not focus on next item

[ivanatikvic1994]

Describe the bug

When using p-dropdown in form I am not able to use tab key to navigate, once the focus is on dropdown, tab key is not doing anything and the focus remains on dropdown. Issue can be tested in official documentation too. Using tab does not focus away from dropdown, it remains kind of stuck. This is also an accessibility issue. Please let me know if there is something I missed out, was looking a lot to solve the problem, it is current blocker from accessibility point of view. Thank you.

Environment

{{ Timezone }}

    <p-dropdown
      class="p-dropdown-lg"
      formControlName="timezoneFormCtrl"
      [options]="timezones"
      optionLabel="displayName"
      dataKey="displayName"
      aria-label="Timezone"
      id="timezone"
    >
    </p-dropdown>
  </span>

Reproducer

No response

Angular version

16.2.6

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

Chrome

Steps to reproduce the behavior

https://primeng.org/dropdown use tab to navigate.

Expected behavior

expected to move focus to next element

[SimonJ-DR]

Tab is meant to traverse elements. Elements themselves use different keys. For a dropdown, use space to open and arrow keys to traverse the elements.

https://primeng.org/dropdown#accessibility for more details

[bmayen]

https://github.com/primefaces/primeng/issues/13944 related. While I can tab to a dropdown then use space to access it, I cannot tab away from it. Keyboard focus gets trapped once it hits a dropdown

[w3soto]

Quick fix

import { Dropdown } from 'primeng/dropdown';

const origOnKeydown = Dropdown.prototype.onKeydown;
Dropdown.prototype.onKeydown = function (event: KeyboardEvent, search: boolean) {
  if (event.which == 9) {
    this.hide();
    return;
  }
  origOnKeydown.apply(this, [event, search]);
};