Keyboard navigation with datepicker when timepicker is true

Webix JS
#1

Hey,

When using a datepicker control with timepicker set to true, is there a way to alter the selected time using only keyboard navigation?

In this example, I have a simple form with a datepicker, textbox, and submit button. I can open the datepicker using keyboard navigation, but I can’t find a way to get to the timepicker portion of it without the mouse.

https://snippet.webix.com/wjoi61hp

If instead you just render a calendar directly with timepicker enabled, you can use tab to navigate to the time component (https://snippet.webix.com/p0th3fj7), but with a datepicker tab just takes you to the next control on the form.

Is there some way to accomplish this?

#2

Hello @RHart ,

If instead you just render a calendar directly with timepicker enabled, you can use tab to navigate to the time component, but with a datepicker tab just takes you to the next control on the form.

The tab navigation works. But the point is that Webix needs to focus dropdown calendars to maintain keyboard navigation and accessibility.
As a solution, you can use onShow event of the popup and set focus:

let idSuggest = $$("datepicker").config.suggest;
$$(idSuggest).attachEvent("onShow", function(){
  let calendar = this.getBody();
  calendar.$view.querySelector(".webix_cal_month_name").focus();
});

Please take a look at the following example:
https://snippet.webix.com/keb4ystp