Datepicker Month/Year Dropdowns Not Working In Safari In A Dialog (#4363 has returned)

[reefruner5]

I believe the issue identified in #4363 has returned.

We are using a JQGrid with a datepicker in the add\edit modal dialog. Clicking on the month or year column has no effect in Chrome, and rarely works in IE9. In this case not working indicates that clicking on the dropdown has no affect in setting the value and the dropdown simple disappears.

Firefox 3.6 has no issues and I have not tested on a later version of Firefox. Based on a web search others appear to be having this issue as well:

​http://stackoverflow.com/questions/7283793/jquery-ui-datepickers-select-month-year-drop-down-doesnt-work-in-ipad-if-the-d

Version Info: jQuery UI Datepicker 1.8.17 jQuery JavaScript Library v1.7.1

OS: Win7

Browsers Affected: IE9 Chrome 16

[Scott González]

Works for me: ​http://jsbin.com/onuhos/edit#javascript,html

[reefruner5]

Can you please try to reproduce using a jqgrid with a modal dialog instead of just a modal dialog. The reproduction here does not fully cover the scenario we are having issues with.

[Scott González]

Can you try to reproduce without using a massive plugin?

[reefruner5]

I copied your example into our codebase and like you saw there are no issues. It only becomes an issue when we overlay this with the JQGrid and use it in the add\edit modal dialog.

[nibedita]

Hi All

It only becomes an issue when we overlay this with the JQGrid and use it in the add\edit modal dialog.

The bug is occurred due to focus change .When we click the month or year drop down the focus set to first element of add/edit dialogue in jQGrid.

So we have to change the jquery-ui .js file and jquery.js file (according to your version).

declare boolean doNotProcessEvenet =false

jquery-1.4.2.min.js

f.event = {

add: function (a, c, d, e) {

if (a.nodeType !== 3 && a.nodeType !== 8) {

if (d === !1) d = D; else if (!d) return; var g, h;

d.handler && (g = d, d = g.handler), d.guid

(d.guid = f.guid++);

var i = f._data(a); if (!i) return; var j = i.events,

k = i.handle;

j

(i.events = j = {}), k

(i.handle = k = function (a) {

/* check if the variable is true then return*/

if (doNotProcessEvenet == true){

return;

}

return typeof f != "undefined" && (!a

f.event.triggered !== a.type) ? f.event.handle.apply(k.elem, arguments) : b

}), k.elem = a, c = c.split(" ");

jquery-ui-1.8.5.custom.min.js

<select class="ui-datepicker-month" onmouseover="doNotProcessEvenet=true;" onmouseout="doNotProcessEvenet=false;" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+a.id+"', this, 'M');doNotProcessEvenet=false;\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+ a.id+"'