tab key and modal windows

[Richard]

We have a single page application (SPA) where we often have modal dialog windows, including dialog windows that open another dialog window, sometimes several deep.  We're using kendo windows.

Our issue is that the user can tab off of the inputs on the active modal window -- to the inputs on the supposedly disabled inputs in the windows that were "disabled" when the modal window popped up.  That means the user can use the enter key to "click" on buttons supposedly unavailable and likewise make use of other "disabled" controls.

This is undesirable.  We need it to be impossible for the user to leave the dialog until they close it.

I have tried such things as (using jquery) to remove the tabindex attribute from all elements and setting the tabindex to -1 for all elements that have a tabindex -- all unsuccessfully.

Please advise.  I can provide more details (i.e., code) as needed. 

Thanks,
Rod Early
McKesson, Inc.

[Dimo]

Hello Rod,

The desired behavior is rather difficult to implement out of the box, as it depends on the modal Window content, and is quite intrusive in general. As a result, it is not supported. You can try implementing some custom approach, which for example binds to focus and blur events on the page, checks which is the newly focused element and moves to focus to something else, if needed.

https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement

To make things simpler, you can experiment with a plain <div> on the page instead of a Window. If you achieve the desired behavior, but have questions on porting it to Kendo UI Windows, then let me know.

Regards,
Dimo
Telerik

[Ajay]

I see this behavior is still present today. I don't get it when you say it is difficult to implement. jquery ui modal dialog already implement it. If you open a modal dialog using jquery dialog, it does not allow the focus to go to the background window and it had been there for quite a while.

[Dimo]

Hello Ajay,

My idea was that the discussed functionality is easier to implement by the developer when the Window content is known, compared to the case when the Window content can be random and the widget should find out all focusable (tabbable) elements and track their focus state.

You can vote for this feature on our feedback portal and we will consider including it in future Kendo UI versions:

http://kendoui-feedback.telerik.com/

Regards,
Dimo
Telerik

 

 

[dandv]

@Dimo, while I understand the development nuances, to users this feels like a bug. From a UX perspective, a user should not be able to tab out of a modal, period.

@others - a (brutal) solution is provided in this duplicate thread.

[Rick]

Following was my workaround - basically stopping the tab/shift tab keydown event if user is at the beginning or end of the dialog.

following in keydown event:

if (key == kendo.keys.TAB) {
var $currentOpenWindow = $(".k-window:visible"); // test if there is a window that is currently displayed
var $inputElements = $currentOpenWindow.find(":input"); // includes buttons
// if a dialog is currently displayed, don't allow the user to tab out of the dialog into the base form. Per Casey on 1/2016, we don't need to support nested dialogs.
if ($currentOpenWindow.length > 0 && $inputElements.length > 0) {
Utility.log(1, "Enforcing tab within displayed window $currentOpenWindow.length:", $currentOpenWindow.length);
var isValid = true;
if (e.shiftKey) {
if (document.activeElement == $inputElements[0])
isValid = false;
}
else {
if (document.activeElement == $inputElements[$inputElements.length-1])
isValid = false;
}
if (!isValid) { // Cancel the tab key - this will prevent the browser from changing focus to any other element
e.stopImmediatePropagation();
e.preventDefault();
return false;
}
}
}