JQuery datepicker closes if label is pressed from open state

Question

I am using the jQuery UI Datepicker plugin, and I found that if the plugin is open and the user clicks on a label element element that focuses on the field to which datepicker is attached, a blur event fires, so the date picker disappears. This is immediately followed by a focal event, again disappearing into the dumper. However, when the blur event fires again, the date picker dialog remains open when the input field loses focus.

My markup is pretty simple:

<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 function is open, try clicking on the title.

I think I can remove the shortcut for datepickers, and disabling the animation may help, but I want to support the user interface provided by these functions. Can someone help me with some inspiration on how to solve this?

Answer 1

I had the same problem as you (in fact, your question arose during my search on the Internet).

I believe the problem is with the jQueryUI version that you are using vs, which was shown in @ShadowScripter jsFiddle. I ran into this problem using v1.8.17 and v1.8.18, but jsFiddle uses v1.8.16 (which does not reproduce the error). Here's a jsFiddle that reproduces the error using v1.8.18.

So, I distinguished v.18 from v.16, made some code replacement and found the culprit:

In postProcess() , 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; }; 

Therefore, when the label button is pressed when the datepicker open, this in v.16 postProcess() is an HTMLDivElement object, and in v.18, self is a datepicker object. _curInst is a _curInst attribute, so the code in v.16 assigns _curInst wrong object ( HTMLDivElement instead of datepicker ). This error is fixed in v.18, but it introduces this “stuck open” error.

Simple removal self._curInst = null; from v.18 fixes the "stuck" error. I'm not sure if there are any side effects that may occur, but I did not notice any problems during my initial testing, although your results may vary.

Answer 2

This is fixed in jQuery UI v1.8.19

Answer 3

Hm, I cannot reproduce your problem.
When I try this JSFiddle , the focus is still on the input.
In any case, the correct html markup for the label should not cover all the input in the label.
To do this, use the for attribute.

Do it instead

 <label for="datepicker">Select date</label><input type="text" id="datepicker" /> 

Here is some info on the for label

Most likely, some of your own code may happen. For example, if you use a return statement somewhere that stops propagation on that particular element. You can learn more about this here .