Dialog: Cannot change month/year in datepicker within modal

[thayyil]

Issue description:

When Date Picker plugin is displayed on a ModelDialog then the Month and Year dropdowns click action does not work. No dropdownlist appreared for month and Year dropdowns.

This issue is noticed only in Mozilla v18.0.1. Chrome (Version 24.0.1312.52 m) and IE 9 (v 9.0.8112) works fine.

how to simulate: use the demos in jquery-ui-1.10.0.custom and modify the dialog demo to have the datepicker inside modelDialog div.

Additional Info: Issue is not happening in v1.9.2 of the Jquery UI.

Issue was found earlier in 1.7.2 and it worked only in IE 9 and didnot work in other browsers. This seems to have fixed in in 1.9.2 version but issue reappered in 1.10 version.

[thayyil]

Please see the followng JSFiddle Link in Mozilla firefox version (v18.0.1 which is the latest as of 21st jan 2013)

​http://jsfiddle.net/469zV/

open the dialog and click on Month or Year drop downs in the datetime picker.

This works ok if jquery UI v1.9.2 Dialog.js

Please change the issue category to ui.dialog

[Scott González]

Reduced: ​http://jsfiddle.net/469zV/2/

[tj.vantoll]

This is a strange one. FireBug is showing that that the click on the dropdowns is going to the div.ui-dialog even though the datepicker correctly has a higher z-index than both the dialog and the overlay.

Interestingly this issue also occurs in Opera. I did verify that it works as expected in Chrome, IE 10, and Safari.

[tj.vantoll]

The dialog code is attempting to give focus to the input in the dialog which apparently Firefox/Opera will allow and prevent the click on the <select>.

​https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L682 -- > ​https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L232

The focusin handler added to the document needs to be smarter about what focus events it redirects into the dialog.

[Scott González]

Dialog: Allow interaction with datepickers from modal dialogs. Fixes #8989 - Dialog: Cannot change month/year in datepicker within modal.

Changeset: c53198c2099d25e80887c86af6d0e624414cc2f7

[Scott González]

This needs to be fixed for real inside datepicker by implementing the .ui-front logic. However, we cannot add the appendTo option and make a change like this in a patch release.

[Scott González]

#9069 is a duplicate of this ticket.

[Scott González]

#9080 is a duplicate of this ticket.

[TUX]

Comenten esta linea de codigo del Jquery y con eso se soluciona:

$(".ui-dialog:visible:last .ui-dialog-content")

.data("ui-dialog")._focusTabbable();

Saludos desde Merida, Yucatan, Mexico...

[juristr]

The problem here is that this fix interferes with other ui controls as well, for instance the select2 plugin. If I add it to a dialog with modal:true it doesn't work..

Here's an example: ​http://jsfiddle.net/juristr/EGqrh/

If you don't use the modal option it works. The problem is this function

_allowInteraction

(​https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L712 which has a hack for the datepicker dialog but should also handle other scenarios like the one of the select2. As far as I understood select2 should implement the .ui-front logic (as the datepicker should). Is there any guidance what exactly that means and possibly an example how to implement it??

[tj.vantoll]

Replying to juristr:

The problem here is that this fix interferes with other ui controls as well, for instance the select2 plugin. If I add it to a dialog with modal:true it doesn't work..

Here's an example: ​http://jsfiddle.net/juristr/EGqrh/

If you don't use the modal option it works. The problem is this function

_allowInteraction

(​https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L712 which has a hack for the datepicker dialog but should also handle other scenarios like the one of the select2. As far as I understood select2 should implement the .ui-front logic (as the datepicker should). Is there any guidance what exactly that means and possibly an example how to implement it??

See ​http://bugs.jqueryui.com/ticket/9087#comment:14.

As an example: ​http://jsfiddle.net/y2X7X/

The .ui-front documentation has not hit the live site yet but it's coming: ​http://stage.api.jqueryui.com/theming/stacking-elements/.

[mabian]

I am using JQuery 1.9.1 and JQuery UI 1.10.3. Apparently no proper fix has been still applied.

The proposed fixes aren't satisfactory, year and month drop downs aren't working on FF 25 when the datepicker is in a dialog... This thing is blocking a milestone release, please advice...

Thanks.

[tj.vantoll]

Replying to mabian:

I am using JQuery 1.9.1 and JQuery UI 1.10.3. Apparently no proper fix has been still applied.

The proposed fixes aren't satisfactory, year and month drop downs aren't working on FF 25 when the datepicker is in a dialog... This thing is blocking a milestone release, please advice...

Thanks.

This seems to be working fine in Firefox 25 with 1.10.3 - ​http://jsfiddle.net/nMfn3/. Please alter that test case to show the issue you're experiencing.

[mabian]

Replying to tj.vantoll:

Replying to mabian:

I am using JQuery 1.9.1 and JQuery UI 1.10.3. Apparently no proper fix has been still applied.

The proposed fixes aren't satisfactory, year and month drop downs aren't working on FF 25 when the datepicker is in a dialog... This thing is blocking a milestone release, please advice...

Thanks.

This seems to be working fine in Firefox 25 with 1.10.3 - ​http://jsfiddle.net/nMfn3/. Please alter that test case to show the issue you're experiencing.

Correct... for some reason the example is working. Now I have the same problem in a JQuery mobile popup, which doesn't seem to have the same fix. But i guess this is out of scope here...

​http://jsfiddle.net/mabian/kLdQm/

For any good soul...Any hint on how to replicate the fix in JQuery mobile (1.3.1)?

Thanks,

Mario

[tj.vantoll]

Replying to mabian:

Replying to tj.vantoll:

Replying to mabian:

I am using JQuery 1.9.1 and JQuery UI 1.10.3. Apparently no proper fix has been still applied.

The proposed fixes aren't satisfactory, year and month drop downs aren't working on FF 25 when the datepicker is in a dialog... This thing is blocking a milestone release, please advice...

Thanks.

This seems to be working fine in Firefox 25 with 1.10.3 - ​http://jsfiddle.net/nMfn3/. Please alter that test case to show the issue you're experiencing.

Correct... for some reason the example is working. Now I have the same problem in a JQuery mobile popup, which doesn't seem to have the same fix. But i guess this is out of scope here...

​http://jsfiddle.net/mabian/kLdQm/

For any good soul...Any hint on how to replicate the fix in JQuery mobile (1.3.1)?

Thanks,

Mario

This might be the problem described in #9087. For any further help please use the forums, #jquery on IRC, or Stack Overflow.