primeng - focus not advancing when tabbing through form / p-dropdown

16 Views Asked by At

I have an Angular app where the forms are built with primeNG 16.3. Unfortunately, tabbing through the form doesnt work because the focus doesn't move further after the first p-dropdown element. When I observe the document.activeElement, it just shows input.p-element which is inside the p-dropdown. The whole element in the DOM looks like this:

<p-dropdown class="p-element p-inputwrapper innerinputfield undefined ng-pristine ng-valid p-inputwrapper-filled ng-touched" ng-reflect-options="[object Object],[object Object" ng-reflect-placeholder="Alternative OPS" ng-reflect-model="_NOT_SELECTED_"
  ng-reflect-filter="true" ng-reflect-disabled="false" ng-reflect-is-disabled="false" ng-reflect-tabindex="0">
  <div ng-reflect-ng-class="[object Object]" class="p-dropdown p-component">
    <div class="p-hidden-accessible">

<input type="text" readonly="" aria-haspopup="listbox" pautofocus="" role="combobox" class="p-element" placeholder="Alternative OPS" aria-expanded="false" tabindex="0"></div>
    <span class="p-element p-dropdown-label p-inputtext ng-star-inserted" ng-reflect-ng-class="[object Object]" ng-reflect-content="" ng-reflect-tooltip-position="right" ng-reflect-position-style="absolute" id="pn_id_10_label">

       <span class="ng-star-inserted">Not selected</span>
    </span>

    <div role="button" aria-label="dropdown trigger" aria-haspopup="listbox" class="p-dropdown-trigger" aria-expanded="false">

    </div>
    <p-overlay class="p-element ng-tns-c3177733119-10 ng-star-inserted" ng-reflect-target="@parent" ng-reflect-visible="false">

    </p-overlay>
  </div>
</p-dropdown>

How can I fix this?

0

There are 0 best solutions below