#9125 open bug ()

Opened February 26, 2013 03:25PM UTC

Last modified July 21, 2017 02:58PM UTC

Datepicker reopens if focused after selecting a date in IE

Reported by: po_taka Owned by:
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.10.1
Keywords: Cc:
Blocked by: Blocking:
Description

Browsers affect: IE9

Datepicker appear immediately after date is selected

Attachments (0)
Change History (16)

Changed February 26, 2013 03:44PM UTC by scottgonzalez comment:1

component: ui.datepicker → ui.dialog
description: Browsers affect: IE9 \ \ Datepicker appear immediately after date is selected \ \ \ click the "click once" and then choose date. When date is clicked, datepicker disappear and then appear. \ \ {{{ \ <html> \ <head> \ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> \ <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> \ <script type="text/javascript"> \ $(document).ready(function() { \ $('#d').dialog({ \ modal: true \ }); \ $('#a').click(function() { \ var el = $('<input type="text">'); \ $('#d').append(el); \ el.datepicker(); \ }); \ }); \ </script> \ </head> \ <body> \ <div id="d"> \ <span id="a" style="cursor: move;">click once</span> \ </div> \ </body> \ </html> \ }}} → Browsers affect: IE9 \ \ Datepicker appear immediately after date is selected \
status: new → open
summary: Dapicker not hiding → Dialog: Datepicker reopens after selecting a date inside a modal dialog in IE9

reduced: http://jsfiddle.net/R9AT2/1/

Changed February 27, 2013 02:44AM UTC by tj.vantoll comment:2

The bug occurs in IE 7 - 10 and does not occur in Firefox/Chrome/Safari/Opera. Possibly related to #5419.

Changed February 27, 2013 02:49AM UTC by tj.vantoll comment:3

summary: Dialog: Datepicker reopens after selecting a date inside a modal dialog in IE9 → Dialog: Datepicker reopens after selecting a date inside a modal dialog in IE

Changed September 30, 2013 09:39AM UTC by jzaefferer comment:4

_comment0: In the datepicker rewrite we changed the datepicker to keep the focus on the text input after selecting a date. So the issue here, where focus ends up on the input again, wouldn't be an issue anymore, as it would happen consistently in all browsers, without reopening the datepicker. \ \ Which doesn't explain this issue, but I feel like its not worth investing the time to find the source of the issue if it only occurs with the current datepicker. It would be different if it was reproducible with something else. → 1380544016223678

In the datepicker rewrite we changed the datepicker to move the focus back to the text input after selecting a date. So the issue here, where focus ends up on the input again, wouldn't be an issue anymore, as it would happen consistently in all browsers, without reopening the datepicker.

Which doesn't explain this issue, but I feel like its not worth investing the time to find the source of the issue if it only occurs with the current datepicker. It would be different if it was reproducible with something else.

Changed October 09, 2013 08:03AM UTC by peter.morlion comment:5

The issue, I believe is that focus is set on the first input. If this is a datepicker, it will open because the datepicker is set to open on focus. This is easily proven by comparing these two jsFiddles:

http://jsfiddle.net/aub9e/ - this one has an input before the datepicker. After selecting a date, you can see the focus is put on the first input.

http://jsfiddle.net/aub9e/1/ - here, the datepicker is the first input, so when it gets focus after selecting a date, the datepicker is reopened.

In Chrome, nothing gets focus after selecting a date, so no problem occurs. This can, however, be avoided by putting the autofocus on a certain other element (just adding 'autofocus' inside a tag, for example a button in the dialog).

Changed February 28, 2014 08:43PM UTC by jasonaroo comment:6

Also occurs in IE10.

Changed July 10, 2014 09:11AM UTC by po_taka comment:7

Bug still exist in v1.11.0

Changed September 10, 2014 05:51PM UTC by ddelella comment:8

This bug still existing in v1.11.1 and is also a problem in IE11

Changed September 19, 2014 12:41PM UTC by scottgonzalez comment:9

#10613 is a duplicate of this ticket.

Changed September 19, 2014 12:46PM UTC by scottgonzalez comment:10

component: ui.dialog → ui.datepicker
summary: Dialog: Datepicker reopens after selecting a date inside a modal dialog in IE → Datepicker reopens if focused after selecting a date in IE

Changed September 19, 2014 12:47PM UTC by scottgonzalez comment:11

#10612 is a duplicate of this ticket.

Changed September 19, 2014 12:48PM UTC by scottgonzalez comment:12

#9313 is a duplicate of this ticket.

Changed April 23, 2015 02:55PM UTC by senyahnoj comment:13

Still an issue in 1.11.0 as demonstrated by the following fiddle:

http://jsfiddle.net/senyahnoj/4nhu9ss6/

Interestingly the same scenario in 1.9.1 posted by jasonaroo (comment 6) doesn't show this behaviour.

http://jsfiddle.net/aub9e/

I'm testing on IE11

Changed December 17, 2015 01:37PM UTC by divinedragon comment:14

I was able to fix this by setting the focus to the modal. Here is the jsFiddle from @scottgonzalez.

Here is the fix on jsFiddle.

$("#datepicker").datepicker({
    onSelect: function() {
        $("#dialog").focus();
    }
});
$("#dialog").dialog({
    modal: true
});

Changed March 17, 2016 11:38PM UTC by scottgonzalez comment:15

#14937 is a duplicate of this ticket.

Changed July 21, 2017 02:58PM UTC by mrgroen comment:16

I tried the focus fix, but it does not work for me.

How to resolve this issue?