Thursday, January 16, 2014

jQuery Datepicker Issue: Month and Year dropdowns in IE have to click twice

While working on a legacy code base recently, I was facing an issue with the jQuery Datepicker. 

For some reason our customer's code is stuck with jquery-ui-1.8.13.custom.min.js. And the browsers mandated for the application is IE 9 with compatibility view with IE8 standards.

Issue

Load up a page with a Datepicker in it, with both the year and month dropdowns enabled. Click on one of the year/month dropdown lists, it appears and disappears. Click it again and it appears correctly.

After being clueless for few minutes, I realized some event is getting triggered right after the click event that is causing the dropdown list to collapse. Then I noticed this:

Reason

So the problem is jQuery Datepicker is binding two methods to the onchange and onclick events of the select. When I dug more and found this:

Hack

So I figured a quick hack is to get rid of the onclick method body in the plugin code itself. I could do that in the minified file (do it only if you know what you are doing!). Then a co-worker showed an even lower impact change, which is to remove the setTimeout() function body portion only – which, if doesn't break any of your existing functionality, is better.

On searching more I found that this is an issue with that version of the plugin tracked here but I am not sure which version has the fix.


Solution

Ideally I should override the onclick method using something like this. I am yet to try it because I have the "we-will-refactor-later" syndrome. 

No comments: