Orphaned jQuery Datepicker reappearing when navigating back to page in IE10

Question

This issue relates to Internet Explorer 10, which is what I'm testing on and doesn't affect my current versions of Firefox or Chrome.

Steps to reproduce in Internet Explorer

1. Navigate to: http://jqueryui.com/datepicker/
2. Click the date field to display the datepicker
3. Whilst it's open, navigate to another application window along side your IE window and then back to IE and click in some empty white space in the datepicker panel.
4. You should see the datepicker disappear and then reappear, which I believe must relate to the fact that the control that last had the focus, regains the focus when you click back.

What I've noticed:

• If you minimize and maximise IE, it doesn't happen
• If you perform the same steps without clicking to another application and clicking directly into white space, it doesn't happen
• It works consistently if you have windows/apps side by side or on 2 monitors

Whilst I can accept that this is a minor issue and doesn't really seem like a bug, it becomes more of an issue in our application where the datepicker is displayed as part of a popup window that disappears after you click away from it.

Date Picker With Parent Container:

Orphaned Date Picker Reappears:

What I've tried:

I've seen posts relating to the visibility of the datepicker that suggest the below, which I've tested:

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

Even though I'm happy to ignore this edge case, it been raised as a bug that I need to fix. I'm just not sure what else to try.

Answer 1

I was able to fix in IE 10 (have it refresh then close, so has a bit of a flicker) by calling:

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

in a function that is called when the div closes (in this quick example you click out side the div when returning to the window). Example fiddle here: http://jsfiddle.net/anyuG/

To reproduce the behavior you describe for IE 10 just comment out that line in the disablepopup() function and you can reproduce the orphaned datepicker window. If you post your actual example as a fiddle we could work with that.

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

UPDATE

The other way to handle this, and looks a little nicer is to make user of the $(window).blur() and $(window).focus() functions. This looks alright in my opinion, note the close on window leave, and reopen if you click within the white box, and re-open but all close together if you click outside the white box:

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

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

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