Dialog: modal dialog causes datepicker link clicks to follow # in IE

[vitko555]

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.

[rdworth]

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

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

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

[bchiasson]

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

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

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

[tj.vantoll]

#9074 is a duplicate of this ticket.

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

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

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

[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

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