I have two time only calendar components which I used to be able to tab directly through with PrimeNG 5.
However with PrimeNG 9 with focusTrap set to false (e.g. [focusTrap]="false") and with onBlur closing the overlay (this.calendar1.overlayVisible = false;). 2 Tab presses are required to go to the next component, Shift-Tab works correctly.
The issue is when the tab is pressed, the up arrow for the time on the popup/overlay grabs focus and then the overlay is closed, so an additional tab is required to exit the time only calendar component, see this StackBlitz:
https://stackblitz.com/edit/primeng-calendar-demo-7qcnhr?file=src/app/app.component.html
How can I through the calendar components, can the popup/overylays not grab focus like it did in PrimeNG 5?
Any help would be appreciated.
The code of interest is :
app.component.html
<p-calendar #calendar1 [(ngModel)]="date" [timeOnly]="true" [focusTrap]="false" (onBlur)="hideCalendar(calendar1)"></p-calendar>
<p-calendar #calendar2 [(ngModel)]="date" [timeOnly]="true" [focusTrap]="false" (onBlur)="hideCalendar(calendar2)"></p-calendar>
app.component.ts
hideCalendar(calendar: Calendar) {
calendar.overlayVisible = false;
}
Cheers.