Dialog: Cannot change month/year in datepicker within modal

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

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

This is a strange one. FireBug is showing that that the click on the dropdowns is going to the

div.ui-dialog

z-index

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

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

document

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

Changeset: c53198c2099d25e80887c86af6d0e624414cc2f7

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.

#9069 is a duplicate of this ticket.

#9080 is a duplicate of this ticket.

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...

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??

Replying to [comment:10 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/.

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.

Replying to [comment:12 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.

Replying to [comment:13 tj.vantoll]:

Replying to [comment:12 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

Replying to [comment:14 mabian]:

Replying to [comment:13 tj.vantoll]: > Replying to [comment:12 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.