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

Keyboard navigation after programmatic Open

2 Answers 82 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
james
Top achievements
Rank 1
james asked on 05 Nov 2020, 09:11 PM

 

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?

 

 

2 Answers, 1 is accepted

Sort by
0
james
Top achievements
Rank 1
answered on 06 Nov 2020, 01:51 PM

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();

 

0
james
Top achievements
Rank 1
answered on 06 Nov 2020, 04:43 PM

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.

Tags
Date/Time Pickers
Asked by
james
Top achievements
Rank 1
Answers by
james
Top achievements
Rank 1
Share this question
or