This is a migrated thread and some comments may be shown as answers.

tab key and modal windows

5 Answers 332 Views
Window
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 29 Jan 2014, 09:30 PM
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.


5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 31 Jan 2014, 03:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ajay
Top achievements
Rank 1
answered on 04 Aug 2014, 04:47 AM
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.
0
Dimo
Telerik team
answered on 04 Aug 2014, 08:23 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
dandv
Top achievements
Rank 2
answered on 31 Dec 2014, 08:16 AM
@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.
0
Richard
Top achievements
Rank 1
answered on 07 Jan 2016, 07:15 PM

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;
}
}
}

Tags
Window
Asked by
Richard
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ajay
Top achievements
Rank 1
dandv
Top achievements
Rank 2
Richard
Top achievements
Rank 1
Share this question
or