Search and Top Navigation
#5498 closed bug (fixed)
Opened April 09, 2010 12:15PM UTC
Closed October 16, 2012 01:51PM UTC
Last modified February 27, 2013 02:37AM UTC
Dialog: modal dialog causes datepicker link clicks to follow # in IE
| Reported by: | vitko555 | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.7.2 |
| Component: | ui.dialog | Version: | 1.8 |
| Keywords: | modal | Cc: | |
| Blocked by: | Blocking: |
Description
See http://forum.jquery.com/topic/modal-dialog-with-datepicker
We have a modal dialog (actually it is a modal form) with a datepicker on it (jquery-ui version of 1.8. and jquery of 1.4.). Everything works fine, except when user selects a date on a datepicker, the anchor part of the URL (everything after the #) is cleared. This is a major problem because this part of the URL should not be changed when user selects date on modal dialog.
For your notice, anchor part is not changed, if datepicker is used without modal dialog (on base page). And also, the behaviour described above was not observed with jquery-ui version of 1.7.2 (but there are other problems with datepicker and modal dialog, like z-index - datepicker is shown behind dialog).
Please see this issue on: http://jsbin.com/iceco3
I found following thing. This bug can only be reproduced in IE (I am using IE8), but in Google Chrome everything works fine.
Attachments (0)
Change History (15)
Changed April 09, 2010 12:16PM UTC by comment:1
Changed April 30, 2010 09:45PM UTC by comment:2
Changed May 12, 2010 05:00AM UTC by comment:3
'dialog overlay' may have something to do with this problem.
It seems a 'modeless' dialog with a datepicker works fine in IE.
Test Code:
jQuery UI 1.8.1
jquery.ui.dialog.js
line 692(ui.dialog.overlay.create)
// return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ); // only for test.
seems to work.
But I don't know how to work around this problem.
Changed September 07, 2011 12:48PM UTC by comment:4
| keywords: | → modal |
|---|
Changed October 11, 2012 02:47PM UTC by comment:5
| milestone: | 1.9.0 → 1.10.0 |
|---|
Changed October 16, 2012 01:51PM UTC by comment:6
| resolution: | → fixed |
|---|---|
| status: | new → closed |
The issue was resolved in jquery 1.7.2 per the reporter. The datepicker behind a dialog is being resolved in another ticket.
Changed October 16, 2012 02:02PM UTC by comment:7
| milestone: | 1.10.0 → 1.7.2 |
|---|
Changed February 09, 2013 06:55PM UTC by comment:8
While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine.
Changed February 09, 2013 10:23PM UTC by comment:9
Replying to [comment:8 devesh]:
While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine.
Please provide a reduced test case that shows this issue. I'm not seeing it with 1.10.0 - http://jsbin.com/iceco3/59.
Changed February 09, 2013 10:25PM UTC by comment:10
#9074 is a duplicate of this ticket.
Changed February 10, 2013 11:02AM UTC by comment:11
Replying to [comment:9 tj.vantoll]:
Replying to [comment:8 devesh]: > While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine. Please provide a reduced test case that shows this issue. I'm not seeing it with 1.10.0 - http://jsbin.com/iceco3/59.
I have provided the reduced test case here http://jsbin.com/iceco3/61/ . Scroll the dialog box to reach the last Select Date textbox which is attached with datepicker . I think the problem is only reproduced when the Content inside dialog box is so large that you need to scroll to reach the date picker. It is only in IE ( I tested in IE 10 and chrome).
Changed February 11, 2013 02:24AM UTC by comment:12
Replying to [comment:11 devesh]:
Replying to [comment:9 tj.vantoll]: > Replying to [comment:8 devesh]: > > While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine. > > Please provide a reduced test case that shows this issue. I'm not seeing it with 1.10.0 - http://jsbin.com/iceco3/59. I have provided the reduced test case here http://jsbin.com/iceco3/61/ . Scroll the dialog box to reach the last Select Date textbox which is attached with datepicker . I think the problem is only reproduced when the Content inside dialog box is so large that you need to scroll to reach the date picker. It is only in IE ( I tested in IE 10 and chrome).
I am not seeing the hash portion of the URL disappearing as is described in this issue. I am however seeing that focus is being given to the first element in the dialog after a date is selected - http://jsbin.com/iceco3/64. Is that the problem you're having?
That issue is caused by #7765; focus should go back into the textbox after a date is selected.
Changed February 11, 2013 05:21AM UTC by comment:13
Replying to [comment:12 tj.vantoll]:
Replying to [comment:11 devesh]: > Replying to [comment:9 tj.vantoll]: > > Replying to [comment:8 devesh]: > > > While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine. > > > > Please provide a reduced test case that shows this issue. I'm not seeing it with 1.10.0 - http://jsbin.com/iceco3/59. > I have provided the reduced test case here http://jsbin.com/iceco3/61/ . Scroll the dialog box to reach the last Select Date textbox which is attached with datepicker . I think the problem is only reproduced when the Content inside dialog box is so large that you need to scroll to reach the date picker. It is only in IE ( I tested in IE 10 and chrome). I am not seeing the hash portion of the URL disappearing as is described in this issue. I am however seeing that focus is being given to the first element in the dialog after a date is selected - http://jsbin.com/iceco3/64. Is that the problem you're having? That issue is caused by #7765; focus should go back into the textbox after a date is selected.
I agree , the problem is related to focus going back to first element. So I will vote up on #7765 and wait for that one to fix.
Changed February 26, 2013 06:48PM UTC by comment:14
I have a smiliar behaviour with jquery-ui ver. 1.10.0 and datepicker concerning multiple dateinputs within a modal dialog. When using ui 1.9.2 everything works fine. Have a look at: http://jsbin.com/iceco3/67 and tryout the second inputfield (finally, change jquery ui to 1.9.2 to get it work)
System: Firefox 18, Win7
Changed February 27, 2013 02:37AM UTC by comment:15
Replying to [comment:14 mica]:
I have a smiliar behaviour with jquery-ui ver. 1.10.0 and datepicker concerning multiple dateinputs within a modal dialog. When using ui 1.9.2 everything works fine. Have a look at: http://jsbin.com/iceco3/67 and tryout the second inputfield (finally, change jquery ui to 1.9.2 to get it work) System: Firefox 18, Win7
This was fixed in 1.10.1 - http://jsbin.com/iceco3/69.
Possibly related to #4453 - UI Datepicker inside UI Dialog Issue ?