Tab key is always hiding the Datepicker (accessibility)

Question

<input id="BirthDate.0" name="BirthDate.0" class="input-sm input_mask mask_date form-control hasDatepicker" onchange="updateFieldGrid('UpdateField', this)" style="" value="" type="text" aria-label="Birth Date" size="11" maxlength="10" placeholder="mm/dd/yyyy" autocomplete="off">

$('input[type="text"].hasDatepicker').keydown(function(event) {
    var target = $(event.target);
    if(event.keyCode == 9) {
        if(!target.datepicker("widget").is(":visible")) {
            target.datepicker("show");
        } else {
            target.datepicker("hide");
        }
    }
});

I have been asked to make a datepicker more accessible, IE a user navigates to the birth date field using the tab key, hits the tab key again, the datepicker opens and they are able to navigate the picker via keyboard buttons, they hit tab again and it closes the picker and focus shifts to the next form element.

The above code gets the datepicker to show when hitting the 'tab' key. However, if you hit tab twice to hide it from the same focused text input field target.datepicker("widget").is(":visible") still evaluates to false. It in fact always evaluates to false. If I check for a different keypress, say the 'a' key which has a keycode of 65 it will indeed hide the datepicker on the second keypress. I've tried event.preventDefault() but this still doesn't resolve it.

For the life of me I am unable to debug why this is happening and why it is always hiding the datepicker whenever I press 'tab' and before the keydown event handler is activated. The debugger shows it being already closed when it enters the keypress handler despite it having been opened when I pressed the key, and this isn't happening for most other keys. So my guess is somewhere upstream prior to the keydown handler being called it is hiding the datepicker, but where?

Edit: I found the following snippet in the jquery-ui-1.13.2.min.js file:

    _doKeyDown: function(a) {
        var b, c = d.datepicker._getInst(a.target);
        b = !0;
        var f = c.dpDiv.is(".ui-datepicker-rtl");
        c._keyEvent = !0;
        if (d.datepicker._datepickerShowing)
            switch (a.keyCode) {
            case 9:
                d.datepicker._hideDatepicker();
                b = !1;
                break;

I set the breakpoint to the datepicker being hidden basically, and it is executing this code. It looks to be default datepicker functionality to hide the datepicker on tab keypress (keycode = 9). Any way to override this?

Answer 1

It looks like the solution was to override the default functionality of all datepickers for the keydown event, which is to close the datepicker even if it was already opened when pressing the 'tab' key.

The answer to this stackoverflow seems to solve it:

jQuery UI datepicker: Configure keyboard shortcuts

Although that stackoverflow answers my question, its question doesn't really jive all that well with the situation I'm facing so whether this should be closed or not is questionable because 1) it concerns keyboard shortcuts within the datepicker which I'm not at all concerned with and 2) they aren't trying to override the 'tab' functionality.