Last Updated: 03 Aug 2022 09:07 by Marcus
Created on: 03 Aug 2022 09:07
Category: Kendo UI® for Vue
Type: Bug Report
The Dialog allows the users to tab outside it

Describe the bug
By default, the Dialog component is a modal window. This means that once the Dialog appears, the page elements are the only ones the users can interact with.

Currently, if you use the keyboard navigation functionality of the Dialog, after pressing the Tab key multiple time, the focus will be on the "Open dialog" button below the modal. This should not happen.

To Reproduce

  1. Open this StackBlitz example
  2. Click on the "Open in new window" button to open the example in a separate window/tab
  3. In the new window, click on the "Open dialog" button
  4. Once the Dialog is opened, press the Tab button 8 times and press Enter
  5. The Dialog will be closed because, after the 8th Enter press, the focus will be again on the "Open dialog" button below the modal area.

Expected behavior
When using the keyboard navigation of the Dialog component, the focus shouldn't be transferred to the elements below the modal area. It should be kept among the elements that are displayed in the Dialog.