Hello Ammar,

Thank you for posting in our community!

I have been looking into your question and an approach I could suggest is using the keydown event and calling its stopPropagation method.

This could look similar to the following:

<igx-time-picker #timePicker (keydown)="onKeyDown($event)"></igx-time-picker>

onKeyDown(keyDown: KeyboardEvent) {
    keyDown.stopPropagation();
}

Additionally, in order to demonstrate my suggestion, I have modified the provided by you sample and on my side I am able to switch between the IgxTimePicker components using the Tab key.

Here could be found the modified sample for your reference. Please test it on your side and let me know if you need any further assistance regarding this matter.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer

After further investigating this matter, I have determined that the IgxDialogComponent provides such functionality out of the box and this could be achieved by setting its focusTrap property to false.

<igx-dialog #dialog [focusTrap]="false"></igx-dialog>

Here could be found a modified sample using the abovementioned approach. Please test it on your side and let me know how it behaves.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer