Primefaces 5.1 calendar lose focus in the text field after select a date

Question

We are using primefaces 5.1 in the project, in a p:calender after I select a date in the pop up calendar window, the text field will lose focus. The issue caused by this is you can not use tab to focus on next field in the form, it will go to the first element in the form instead. Even the primefaces showcase has this issue: http://www.primefaces.org/showcase/ui/input/calendar.xhtml

Any suggestion on how to solve it ?

When I select a date in the showcase's popup window, a first "tab" press does nothing, a second "tab" press opens the popup again and a third "tab" press switches the focus to the next input field. You could file a PrimeFaces bug for not switching immediately. — Smutje
@Smutje someone has already logged that bug back to the date in 2011 which is PF3.x at that time, but untill now, still no fix. Its not a big issue but very annoying for the user experience. — Kuku

Kuku Kuku · Accepted Answer · 2015-04-23T01:06:36

After some search and local testing while waiting for the answer. I comes out a way to fix this. It is actually a JQuery UI bug (or may be not as it been there since the first version and still got no official fix!). We need to override the jQueryUI datepicker used by primefaces. Make sure to put the import for that custom script in the last facet so it will be pick up as a resource in the last order.

<f:facet name="last">
    <h:outputScript name="default/js/customDatePicker.js" />
</f:facet>

Inside the JavaScript code I do the following to merge the _selectDate into datepicker(the change is in the last else) which will over ride the orginal _selectDate without changing the others. It will do the trick for me on Chrome and IE11.

$(document).ready(function () {
    $.extend(jQuery.datepicker, {
        _selectDate: function (id, dateStr) {
            var onSelect,
                    target = $(id),
                    inst = this._getInst(target[0]);

            dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
            if (inst.input) {
                inst.input.val(dateStr);
            }
            this._updateAlternate(inst);

            onSelect = this._get(inst, "onSelect");
            if (onSelect) {
                onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
            } else if (inst.input) {
                inst.input.trigger("change"); // fire the change event
            }

            if (inst.inline) {
                this._updateDatepicker(inst);
            } else {
                this._hideDatepicker();
                inst.input.focus();
            }
        }
    });
});

Primefaces 5.1 calendar lose focus in the text field after select a date

1 Answers