Opened 10 years ago

Closed 7 years ago

Last modified 7 years ago

#5498 closed bug (fixed)

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.

Change History (15)

comment:1 Changed 10 years ago by rdworth

Possibly related to #4453 - UI Datepicker inside UI Dialog Issue ?

comment:2 Changed 10 years ago by froemken

I can confirm this problem. But I can't confirm that this problem is related to issue #4453. #4453 should be fixed with SVN 3762. I just downloaded Version 4003 from SVN and packed dialog and datepicker js-file into my website. But the problem isn't solved.

comment:3 in reply to:  description Changed 10 years ago by watanabe

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

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

Keywords: modal added

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

Milestone: 1.9.01.10.0

comment:6 Changed 7 years ago by bchiasson

Resolution: fixed
Status: newclosed

The issue was resolved in jquery 1.7.2 per the reporter. The datepicker behind a dialog is being resolved in another ticket.

comment:7 Changed 7 years ago by bchiasson

Milestone: 1.10.01.7.2

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

comment:9 in reply to:  8 ; Changed 7 years ago by tj.vantoll

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

comment:10 Changed 7 years ago by tj.vantoll

#9074 is a duplicate of this ticket.

comment:11 in reply to:  9 ; Changed 7 years ago by devesh

Replying to tj.vantoll:

Replying to 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).

comment:12 in reply to:  11 ; Changed 7 years ago by tj.vantoll

Replying to devesh:

Replying to tj.vantoll:

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

comment:13 in reply to:  12 Changed 7 years ago by devesh

Replying to tj.vantoll:

Replying to devesh:

Replying to tj.vantoll:

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

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

comment:15 in reply to:  14 Changed 7 years ago by tj.vantoll

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

Note: See TracTickets for help on using tickets.