https://stackblitz.com/edit/angular-9iwjef
Please refer to the above sample. When using igx-time-picker inside igx-dialog it does not allow to switch between controls using tab.
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
Hello Riva,
Thanks for your response. I think this is a bad approach as we are handling keydown to allow tab switching. Ideally this should be handled inside the ignite framework.
Thanks
Ammar Hussain
Hello,
I am glad I was able to assist you regarding this matter.
Thank you for using Infragistics components.
Regards,Riva IvanovaAssociate Software Developer
This worked. Thanks a lot.
Regards
Thank you for following up!
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.