Iframe will block traversing inputs on a Tab key press when modal

[Iankodj]

Bug report

Having an iframe element in the content of a modal popup will block the tab mechanism.

Reproduction of the problem

Case 1

https://dojo.telerik.com/@Dimitar-Goshev/ocIgonaT

1. Select the input
2. Press Tab
3. Focus is trapped to that input instead of selecting the iframe and afterwards the button

Current behavior

Focus stays in the same input

Expected/desired behavior

Focus is not trapped in the input - patched here: https://dojo.telerik.com/@Dimitar-Goshev/oTireduB

Patch

https://dojo.telerik.com/@Dimitar-Goshev/oTireduB

    var originalFocus = kendo.ui.Popup.TabKeyTrap.fn._focus;
    kendo.ui.Popup.TabKeyTrap.fn._focus = function (element) {
      if (element.nodeName == "IFRAME") {
        element.contentWindow.focus()
        return;
      }
      
    	originalFocus.call(this, element);
    };
    
    $(document).ready(function() {
      var divWindowContent = $('.dynamicWindow');
      
      divWindowContent.kendoWindow({
        modal: true
      });
    });

Environment

• Kendo UI version: 2023.3.1114
• Browser: Chrome

[veselints]

In Firefox, when using the above workaround with Shift+Tab back through the iframe the focus stays on the iframe.

[veselints]

Also reported in: Ticket ID: 1424568

[Dimitar-Goshev]

The Firefox issue could be related to this one: Unable to focus elements placed after Editor in modal Window by pressing Tab in Firefox

[Juveniel]

The current implementation of the TabKeyTrap(used in Window and Dialog components) does not allow for a viable fix that targets consistent focus behavior in the different browsers.

Taking the above into consideration, I would suggest refactoring the TabKeyTrap implementation to utilize a different method for keeping the focus in a container e.g using start and end markers.

Additionally, this functionality can be extracted as a separate module and have separate documentation and public methods available to clients.

/cc @veselints @Iankodj