Rank 1
Iron
Iron
Hey,
currently when dialog is opened and browser focus is on URL bar and then user will press TAB to focus page, first focused element is first element on the page, not in dialog - you can check this behavior here (example from docs - https://www.telerik.com/kendo-react-ui/components/dialogs/examples/dialog/overview/func/?theme=default-ocean-blue&themeVersion=6.2.0)
Tested using Google Chrome 112.0.5615.49
1. Click on URL bar
2. Press tab until focus is on page
3. Button is getting focus even though the dialog is open
Can you confrim that this is a bug and it is not intended behavior?
2 Answers, 1 is accepted
Hi Kamil,
By default, the autoFocus of the Dialog is set to false, so if you want to force the Dialog to focus when mounted you can set its "autoFocus" property to "true":
<Dialog
title={'Please confirm'}
autoFocus={true}Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
thank you for your response but it doesnt work, please check this codesandbox - https://codesandbox.io/s/stupefied-monad-mqmh3d?file=/app/main.tsx and try to follow this steps
1. Open https://mqmh3d.csb.app/
2. Click on the URL bar so its get focus
3. Press TAB key until some element on page will get focus
4. Focus is on the first element on page, not in modal even thoguh modal is opened
In addition I have added to the attachments a video in which i present this behavior
Best regards,
Kamil
Hi Kamil,
I have to say that this is expected with the current implementation of the Dialog, because it does not provide an option for keeping the focus within the Dialog (as some other dialogs have).
You can log a feature request for such feature in our feedback portal: