Ticket #6198 (closed bug: fixed)

Opened 4 years ago

Last modified 2 years ago

Datepicker Month and Year dropdowns in IE have to click twice

Reported by: timn@… Owned by:
Priority: minor Milestone: 1.8.15
Component: ui.datepicker Version: 1.8.3
Keywords: IE year month dropdown Cc: tim@…
Blocking: Blocked by:

Description

In IE6 and IE8 when using the datepicker dropdowns for month and year using the options : changeMonth: true, changeYear: true you have to click twice in IE, the first click the drop down flashes up, the second click displays the dropdown as expected. It works with a single click in firefox and chrome.

This can be replicated by going to :

 http://jqueryui.com/demos/datepicker/#dropdown-month-year

using IE 6 or 8 and clicking on the dropdowns. I couldn't find any references to this issue. I cant believe I'm the first to see this so sorry if its an known issue.

Change History

comment:1 Changed 3 years ago by peter@…

I am having exactly the same problem. However not on all pages. I can't see why it works flawlessly on some and has the irritating "click twice" bug on others

comment:2 Changed 3 years ago by peter@…

If I go back to the stand alone datepicker ver 1.8, it works. I created a custom jquery-ui-1.8.6.custom.min.js file without the date picker and the also referenced an old jquery.ui.datepicker.js file that I still had and it works fine.

The header in that file is: /*

comment:3 Changed 3 years ago by chubyqc

We've experienced this problem too, with IE7 and IE8.

In our case, it happened with 1.8.5 too.

Last edited 3 years ago by chubyqc (previous) (diff)

comment:4 Changed 3 years ago by scott.gonzalez

#6769 is a duplicate of this ticket.

comment:5 Changed 3 years ago by jdufresne

Created a fix for this bug. There is focus logic in the _selectMonthYear() and _clickMonthYear() that goes out of sync. The onclick event occurs when clicking the select, the onchange event occurs when selecting an item from the select, but the user is free to click outside the select getting the flag out of whack. I found it most convenient to just delete this logic altogether and saw no regressions. Tested in Firefox, IE7, and IE8. I do not have IE6 at my disposal to test. Patch below.

diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js
index abcb370..6dc326f 100644
--- a/ui/jquery.ui.datepicker.js
+++ b/ui/jquery.ui.datepicker.js
@@ -850,7 +850,6 @@ $.extend(Datepicker.prototype, {
 	_selectMonthYear: function(id, select, period) {
 		var target = $(id);
 		var inst = this._getInst(target[0]);
-		inst._selectingMonthYear = false;
 		inst['selected' + (period == 'M' ? 'Month' : 'Year')] =
 		inst['draw' + (period == 'M' ? 'Month' : 'Year')] =
 			parseInt(select.options[select.selectedIndex].value,10);
@@ -858,18 +857,6 @@ $.extend(Datepicker.prototype, {
 		this._adjustDate(target);
 	},
 
-	/* Restore input focus after not changing month/year. */
-	_clickMonthYear: function(id) {
-		var target = $(id);
-		var inst = this._getInst(target[0]);
-		if (inst.input && inst._selectingMonthYear) {
-			setTimeout(function() {
-				inst.input.focus();
-			}, 0);
-		}
-		inst._selectingMonthYear = !inst._selectingMonthYear;
-	},
-
 	/* Action for selecting a day. */
 	_selectDay: function(id, month, year, td) {
 		var target = $(id);
@@ -1550,7 +1537,6 @@ $.extend(Datepicker.prototype, {
 			var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear);
 			monthHtml += '<select class="ui-datepicker-month" ' +
 				'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'M\');" ' +
-				'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
 			 	'>';
 			for (var month = 0; month < 12; month++) {
 				if ((!inMinYear || month >= minDate.getMonth()) &&
@@ -1583,7 +1569,6 @@ $.extend(Datepicker.prototype, {
 			endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
 			inst.yearshtml += '<select class="ui-datepicker-year" ' +
 				'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
-				'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
 				'>';
 			for (; year <= endYear; year++) {
 				inst.yearshtml += '<option value="' + year + '"' +

comment:6 Changed 3 years ago by rdworth

#7212 is a duplicate of this ticket.

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

  • Status changed from new to closed
  • Resolution set to fixed

Datepicker: Removed click handling for month and year dropdowns. Fixes #6198 - Datepicker Month and Year dropdowns in IE have to click twice.

Thanks jdufresne

Changeset: 70687f7955cb2471ad6df3a7806031245e5979cd

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

Datepicker: Removed click handling for month and year dropdowns. Fixes #6198 - Datepicker Month and Year dropdowns in IE have to click twice.

Thanks jdufresne (cherry picked from commit 70687f7955cb2471ad6df3a7806031245e5979cd)

Changeset: 1d4795683e21a49115f1b0458349c63c5f54ac33

comment:9 Changed 3 years ago by scott.gonzalez

  • Milestone changed from TBD to 1.8.15

comment:10 follow-up: ↓ 11 Changed 2 years ago by dcaballero

I'm still seeing this issue in IE8, using 1.8.16

Please see:  http://www.promocionesdell.com/navidad/registro-primera-vez.php

The input labeled "Fecha Nacimiento"

comment:11 in reply to: ↑ 10 Changed 2 years ago by rdworth

Replying to dcaballero:

I'm still seeing this issue in IE8, using 1.8.16

Please see:  http://www.promocionesdell.com/navidad/registro-primera-vez.php

The input labeled "Fecha Nacimiento"

This ticket is related to month and year drop-downs. The sample you linked to has neither.

Note: See TracTickets for help on using tickets.