Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#8989 closed bug (fixed)

Dialog: Cannot change month/year in datepicker within modal

Reported by: thayyil Owned by:
Priority: minor Milestone: 1.10.1
Component: ui.dialog Version: 1.10.0
Keywords: regression Cc:
Blocked by: Blocking:

Description

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.

Change History (15)

comment:1 Changed 7 years ago by 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

comment:2 Changed 7 years ago by Scott González

Component: ui.datepickerui.dialog
Keywords: regression added
Milestone: none1.10.1
Status: newopen
Summary: DateTime Picker issue when rendered on DialogModal dialog: Cannot change month/year in datepicker

comment:3 Changed 7 years ago by 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.

comment:4 Changed 7 years ago by tj.vantoll

Summary: Modal dialog: Cannot change month/year in datepickerDialog: Cannot change month/year in datepicker within modal

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.

comment:5 Changed 7 years ago by Scott González

Resolution: fixed
Status: openclosed

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

Changeset: c53198c2099d25e80887c86af6d0e624414cc2f7

comment:6 Changed 7 years ago by 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.

comment:7 Changed 7 years ago by Scott González

#9069 is a duplicate of this ticket.

comment:8 Changed 7 years ago by Scott González

#9080 is a duplicate of this ticket.

comment:9 Changed 7 years ago by 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...

comment:10 Changed 6 years ago by 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??

comment:11 in reply to:  10 Changed 6 years ago by 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/.

comment:12 Changed 6 years ago by 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.

comment:13 in reply to:  12 ; Changed 6 years ago by 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.

comment:14 in reply to:  13 ; Changed 6 years ago by 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

comment:15 in reply to:  14 Changed 6 years ago by 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.

Note: See TracTickets for help on using tickets.