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

Taborder skipping DateTime Fields (Possible Bug)

2 Answers 92 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Dhruv asked on 17 Aug 2017, 05:44 PM

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 Answers, 1 is accepted

Sort by
Telerik team
answered on 21 Aug 2017, 04:34 PM

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.

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.
Top achievements
Rank 1
answered on 21 Aug 2017, 09:30 PM

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 () {; });
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); });
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.    });
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.    });
Date/Time Pickers
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Top achievements
Rank 1
Share this question