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?