Taborder skipping DateTime Fields (Possible Bug)

3 posts, 0 answers
  1. Dhruv
    Dhruv avatar
    10 posts
    Member since:
    Oct 2016

    Posted 17 Aug Link to this post

    Before starting, I would like to show you that even in your own demo page located Here this problem is reproducible so I do not think it is an issue in my code...

    Open up demo linked above and click edit on any item. Tab through the fields using your keyboard. The tab order is not as you see on the screen not to mention that it skips the checkbox field completely forcing mouse use which is not mass entry friendly (I manually fixed the issue with checkbox's so we can ignore that for now).

    When you click edit then hit tab first focused field is

    1: UnitsOnOrder. 

    2: CategoryID

    3: QuantityPerUnit

    4: Update

    5:  Cancel     

    6: Last Supply (Date field)

    7: Close Button in top Right

    8: Product Name

    9: Unit Price

    10: Discontinued (Checkbox is selected when i open a console and type document.activeElement but clicking space bar does not check the field, although in my instance I worked up a fix)

    11: Restarts from 1 again

     

    My issue is that no matter if I can manually force focus on the Product Name field upon popup invocation, there is no way including setting tabindex to make the datepicker to go into focus in the order that it is on the actual form. It always gets focus after the cancel button including in my code. I need to be able to tab into the field in the order that it is shown in the UI.

     

    Any help would be great as I already tried tabindex on all elements and its not being honored.

     

  2. Pavlina
    Admin
    Pavlina avatar
    6170 posts

    Posted 21 Aug Link to this post

    Hello,

    I have already answered the support ticket you have opened on the same subject, therefore in order to avoid duplicate posts I will ask you to continue our communication there. Thank you for your understanding.

    Regards,
    Pavlina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dhruv
    Dhruv avatar
    10 posts
    Member since:
    Oct 2016

    Posted 21 Aug in reply to Pavlina Link to this post

    Since Kendo team was unable to help me resolve this issue I thought I would provide my fix to the community:

    IE and Edge already seem to work fine with date fields and invoke order properly however they do not do so for dropdown menu's. My code below ensures Chrome, IE and Edge all invoke items via tab order in the order they are displayed on the screen based on HTML structure. I used the demo page in the original message to assume how the DOM was structured since I too use the exact same structure as in the demo's. The code below is set to execute on launch of any popup so it can re-order and properly invoke all the calendar and dropdown menu's in the correct order.

    Hopefully the code below helps someone else out since I had to be able to tab in the correct order no matter the browser or field type.

    01.var $dropDownList = $("span.k-widget.k-dropdown.k-header");
    02.    $dropDownList.focus(function () { this.click(); });
    03. 
    04.    //Loop through every input on the screen and set tabindex incrementing by 100 so we can add fields inbetween for dropdowns and calendars
    05.    $(":input").each(function (i) { $(this).attr('tabindex', i * 100); });
    06. 
    07.    //Loop through every dropdown and find the previous elements tabindex and add 5 so it tabs into dropdown right after previous element
    08.    //This works in conjuction with the first 2 lines which when focus is drawn on a dropdown it invokes a click and throws you into the filter
    09.    //search box
    10.    $("span.k-widget.k-dropdown.k-header").each(function (i) {
    11.        var index = $($(this).closest(".editor-field").prev()["0"].previousElementSibling).find("input:not(:hidden)")["0"].tabIndex + 5
    12.        $(this).attr('tabindex', index);
    13.    });
    14. 
    15.    //Same as above except for date picker you can make it work for datetime by changing the class in the jquery select
    16.    $("span.k-widget.k-datepicker.k-header").each(function (i) {
    17.        var index = $($(this).closest(".editor-field").prev()["0"].previousElementSibling).find("input:not(:hidden)")["0"].tabIndex + 5
    18.        $(this).attr('tabindex', index);
    19.    });
Back to Top