Context: kendoGrid with editing set to popup. Opens a popup Window with fields in it, in this case the template for the editing window is custom with JS logic etc. The tabindex values have been set for all the fields in the order we want and autofocus set on the first field. I have custom JS that runs on the Edit event of the grid to position and size the window when it pops open: function editWindowLocation(e)
Observation: This is relatively simple with JS code if the Form and the Fields are static doing something like: document.formName.fieldName.focus();
Problem: After the window pops open, the new window has focus. When the tab key is pressed, it then sends focus to the buttons on the window (Update/Cancel) more tabbing later, it reaches the fields. How do I get the first field in the popup window to focus, so tabbing will set focus to the other fields in the order their index is set?
Solution: At the end of function editWindowLocation(e) I added a little bit of code to find the first tabindex and set focus to it.
setTimeout(function () {
$("input[tabindex=1]").focus();
}, 1000);
Why a timeout you say? The kendoWindow is somehow overriding the .focus() event and placing the focus on the div that makes the kendoWindow. But when done in a timeout, it works as expected. Not sure why this happens, but this worked for me.
Hope this helps people with similar issues.