Keyboard navigation after programmatic Open

[james]

 

I checked the documentation for the API and am utilizing the open method

However when opening the calendar popup this way the keyboard navigation no longer works.  The only way to select a date seems to be via mouse click.

 

The issue is re-creatable on the demo example below

https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/open

I have found I can programatically set a kind of focus using the code

setTimeout(function () {
                 var ev = $.Event("keydown");
                   ev.keyCode = 39;
                      $("#FromDate").trigger(ev);
}, 100);

 

But after this the keyboard navigation is still not active.

Is there a way to make this work?

 

 

[james]

I found the below code allows the user to navigate with the keyboard for tthe selected month but as soon as the arrow across to a different month the arrows stop working again.

angular.element("#FromDate").data("kendoDatePicker").open();
                   setTimeout(function () {
                       var ev = $.Event("keydown");
                       ev.keyCode = 39;
                       $("#FromDate").trigger(ev);
                   }, 100);
                   var focus = angular.element("td.k-state-focused a")[0];
                   focus.focus();

 

[james]

Resolved it.

https://www.telerik.com/forums/datetimepicker-keyboardnavigation-not-working Helped

var focus = angular.element("#FromDate")[0];
                   focus.focus();

Realised I just had to ensure I set the focus on the datepicker input (not the popup) from the button which triggers it.  This is because the Keyboard accessibility functionality comes from the input not the calendar control.