Problem with focus in dialog

[Kamil]

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?

[Konstantin Dikov]

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":

• https://www.telerik.com/kendo-react-ui/components/dialogs/api/DialogProps/#toc-autofocus

        <Dialog
          title={'Please confirm'}
          autoFocus={true}

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Kamil]

Hello Konstantin,
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

[Konstantin Dikov]

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:

• https://feedback.telerik.com/kendo-react-ui