Orphaned jQuery Datepicker reappears when going to page in IE10

Question

This issue applies to Internet Explorer 10 , which I am testing and not affecting current versions of Firefox or Chrome .

Steps to play in Internet Explorer

• Go to: http://jqueryui.com/datepicker/
• Click the date field to display datepicker
• While it opens, go to another application window next to your IE window, and then go back to IE and click on the empty blank space in the datepicker panel.
• You should see that the datepicker disappears and then reappears, which I think should relate to the fact that the last control that had focus restores focus when pressed.

What I noticed:

• If you minimize and maximize IE , this does not happen.
• If you perform the same actions without clicking on another application and without directly pressing the space bar, this does not happen.
• It works sequentially if you have windows / applications side by side or on 2 monitors

Although I can agree that this is a minor issue and actually does not seem like an error, this becomes a problem in our application where the datepicker displayed as part of a popup that disappears after clicking on it.

Date picker with parent container:

An orphan date simulator appears:

What I tried:

I saw posts regarding datepicker visibility which offer below which I tested:

 $("#my-datepicker-div").datepicker('destroy'); $("#my-datepicker-div").datepicker('disable'); 

Despite the fact that I am happy to ignore this edge, it was raised as a mistake that I need to fix. I just don't know what else to try.

Answer 1

I managed to install in IE 10 (update, then close, so a little flicker) by calling:

 $("#datepicker").datepicker("hide"); 

in the function called when the div is closed (in this brief example, you select the side of the div when you return to the window). Example fiddle here: http://jsfiddle.net/anyuG/

To reproduce the behavior you described for IE 10, simply comment out this line in the disablepopup() function, and you can play the datepicker orphan axis window. If you post your actual example as a violin, we can work with that.

Grabbed a popup example here: http://istockphp.com/jquery/creating-popup-div-with-jquery/

UPDATE

Another way to deal with this and it looks a little better is to make the user $(window).blur() and $(window).focus() . It looks good, in my opinion, pay attention to closing the window and will open again if you click in the white box and open again, but everything is close to each other if you click outside the white box:

 $(window).blur(function(e) { $("#datepicker").datepicker("hide"); }); 

Updated violin. Play with .focus() to determine the best combo for your preference, and you should be good. You may also want to detect only IE 10 and run this code only in that browser.

Fiddle: http://jsfiddle.net/78252/1/