Question

I use the jQuery UI Datepicker plugin and I found that if the plugin is open and the user clicks a label element setting focus to the field which the datepicker is bound to, the blur event fires, thus the datepicker fades out. This is immidiately followed by the focus event, fading the datepicker back in. However, when the blur event fires again, the datepicker dialog remains open when the input field loses focus.

My markup is quite basic:

<label>Select date <input type="text" id="datepicker" /></label>
<script type="text/javascript">$('#datepicker').datepicker(options);</script>

I reproduced the error on the jQuery UI Datepicker page by typing the following in the console:

$('h2:first').html('<label for="datepicker">Datepicker</label>');

When the datepicker is open, try clicking on the heading.

I guess I can remove the label for datepickers, and disabling the animation might help, but I want to maintain the user experience these features provide. Can anyone help me with some inspiration on how to solve this?

Answer 1

I was having the exact same problem as you (in fact your question came up during my googling).

I believe the problem is in the version of jQueryUI you are using vs what was shown in @ShadowScripter’s jsFiddle. I encountered this problem using v1.8.17 and v1.8.18, but the jsFiddle uses v1.8.16 (which doesn’t reproduce the bug). Here’s a jsFiddle which does reproduce the bug using v1.8.18.

So I diffed v.18 against v.16, did some code swapping and found the culprit:

In Datepicker.prototype._hideDatepicker, postProcess() is defined as:

v1.8.18:

var self = this;
var postProcess = function() {
    $.datepicker._tidyDialog(inst);
    self._curInst = null;
};

v1.8.16

var postProcess = function() {
    $.datepicker._tidyDialog(inst);
    this._curInst = null;
};

So when the label is clicked while datepicker is open, this in v.16’s postProcess() is an HTMLDivElement object while in v.18, self is a Datepicker object. _curInst is an attribute of Datepicker so the code in v.16 is assigning _curInst to the wrong object (the HTMLDivElement instead of Datepicker). This mistake gets fixed in v.18 but it introduces this “stuck open” bug.

Simply removing self._curInst = null; from v.18 fixes the “stuck open” bug. I’m not sure what, if any, side effects this may cause, but I didn’t notice any issues during my initial testing although your results may vary.