tab key and modal windows

6 posts, 0 answers
  1. Richard
    Richard avatar
    5 posts
    Member since:
    Dec 2013

    Posted 29 Jan 2014 Link to this post

    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.


  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 31 Jan 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Ajay
    Ajay avatar
    1 posts
    Member since:
    Sep 2008

    Posted 03 Aug 2014 in reply to Dimo Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 04 Aug 2014 Link to this post

    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!
     
  6. dandv
    dandv avatar
    14 posts
    Member since:
    Dec 2014

    Posted 31 Dec 2014 in reply to Dimo Link to this post

    @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.
  7. Richard
    Richard avatar
    1 posts
    Member since:
    Oct 2013

    Posted 07 Jan Link to this post

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

Back to Top
Kendo UI is VS 2017 Ready