Skip to main content

Search and Top Navigation

#8989 closed bug (fixed)

Opened January 21, 2013 04:00AM UTC

Closed January 25, 2013 01:51PM UTC

Last modified October 31, 2013 12:03PM UTC

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.

Attachments (0)
Change History (15)

Changed January 21, 2013 06:30AM UTC by thayyil comment:1

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

Changed January 21, 2013 02:19PM UTC by scottgonzalez comment:2

component: ui.datepickerui.dialog
keywords: → regression
milestone: none1.10.1
status: newopen
summary: DateTime Picker issue when rendered on DialogModal dialog: Cannot change month/year in datepicker

Changed January 25, 2013 03:58AM UTC by tj.vantoll comment:3

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.

Changed January 25, 2013 01:30PM UTC by tj.vantoll comment:4

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.

Changed January 25, 2013 01:51PM UTC by Scott González comment:5

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

Changed January 25, 2013 01:52PM UTC by scottgonzalez comment:6

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.

Changed February 07, 2013 10:16PM UTC by scottgonzalez comment:7

#9069 is a duplicate of this ticket.

Changed February 12, 2013 12:52PM UTC by scottgonzalez comment:8

#9080 is a duplicate of this ticket.

Changed June 04, 2013 03:59PM UTC by TUX comment:9

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

Changed June 21, 2013 11:20AM UTC by juristr comment:10

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

Changed June 21, 2013 12:41PM UTC by tj.vantoll comment:11

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

Changed October 30, 2013 08:25AM UTC by mabian comment:12

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.

Changed October 30, 2013 08:50PM UTC by tj.vantoll comment:13

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.

Changed October 31, 2013 09:41AM UTC by mabian comment:14

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

Changed October 31, 2013 12:03PM UTC by tj.vantoll comment:15

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.