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
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.