Merge pull request #1440 from BenjaminNeilDavis/issue-1433-datepicker…

…-ie11 Removal of .blur events and changing them to a .change event.
ExactTarget · Aug 5, 2015 · 587af3c · 587af3c
2 parents cef6d99 + 1603c0f
commit 587af3c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 22 deletions.
diff --git a/js/datepicker.js b/js/datepicker.js
@@ -90,12 +90,11 @@
 
 		this.$calendar.find('.datepicker-today').on('click.fu.datepicker', $.proxy(this.todayClicked, this));
 		this.$days.on('click.fu.datepicker', 'tr td button', $.proxy(this.dateClicked, this));
-		this.$element.find('.dropdown-menu').on('mousedown.fu.datepicker', $.proxy(this.dropdownMousedown, this));
 		this.$header.find('.next').on('click.fu.datepicker', $.proxy(this.next, this));
 		this.$header.find('.prev').on('click.fu.datepicker', $.proxy(this.prev, this));
 		this.$headerTitle.on('click.fu.datepicker', $.proxy(this.titleClicked, this));
-		this.$input.on('blur.fu.datepicker', $.proxy(this.inputBlurred, this));
-		this.$input.on('focus.fu.datepicker', $.proxy(this.inputFocused, this));
+		this.$input.on('change.fu.datepicker', $.proxy(this.inputChanged, this));
+		this.$input.on('mousedown.fu.datepicker', $.proxy(this.showDropdown, this));
 		this.$wheels.find('.datepicker-wheels-back').on('click.fu.datepicker', $.proxy(this.backClicked, this));
 		this.$wheels.find('.datepicker-wheels-select').on('click.fu.datepicker', $.proxy(this.selectClicked, this));
 		this.$wheelsMonth.on('click.fu.datepicker', 'ul button', $.proxy(this.monthClicked, this));
@@ -187,6 +186,7 @@
 			this.selectedDate = date;
 			this.$input.val(this.formatDate(date));
 			this.inputValue = this.$input.val();
+			this.hideDropdown();
 			this.$input.focus();
 			this.$element.trigger('dateClicked.fu.datepicker', date);
 		},
@@ -209,14 +209,6 @@
 			this.$element.find('.input-group-btn').removeClass('open');
 		},
 
-		dropdownMousedown: function () {
-			var self = this;
-			this.preventBlurHide = true;
-			setTimeout(function () {
-				self.preventBlurHide = false;
-			}, 0);
-		},
-
 		enable: function () {
 			this.$element.removeClass('disabled');
 			this.$element.find('input, button').removeAttr('disabled');
@@ -263,7 +255,7 @@
 			return this.restricted;
 		},
 
-		inputBlurred: function (e) {
+		inputChanged: function () {
 			var inputVal = this.$input.val();
 			var date;
 			if (inputVal !== this.inputValue) {
@@ -277,14 +269,16 @@
 				}
 
 			}
+		},
 
-			if (!this.preventBlurHide) {
-				this.$element.find('.input-group-btn').removeClass('open');
+		showDropdown: function (e) {
+			if (!this.$input.is(':focus')){
+				this.$element.find('.input-group-btn').addClass('open');
 			}
 		},
 
-		inputFocused: function (e) {
-			this.$element.find('.input-group-btn').addClass('open');
+		hideDropdown: function () {
+			this.$element.find('.input-group-btn').removeClass('open');
 		},
 
 		isInvalidDate: function (date) {

diff --git a/test/datepicker-moment-test.js b/test/datepicker-moment-test.js
@@ -145,7 +145,7 @@ define(function(require){
 			});
 
 			$datepickerInput.val('03/31/1987');
-			$datepickerInput.trigger('blur');
+			$datepickerInput.trigger('change');
 
 			equal(called, 1, 'Event was triggered as expected');
 			equal(typeof event, 'object', 'Appropriate event object passed back as argument');
@@ -175,7 +175,7 @@ define(function(require){
 			equal($datepicker.find('.datepicker-wheels-year').hasClass('hidden'), true, 'years wheel hidden');
 
 			$datepickerInput.val('03/31/1988');
-			$datepickerInput.trigger('blur');
+			$datepickerInput.trigger('change');
 			dateString = $datepicker.datepicker('getDate').toString();
 			equal((dateString==='Invalid Date' || dateString==='NaN'), true, 'user can\t input date outside current year');
 		});
@@ -349,7 +349,7 @@ define(function(require){
 			var formatted;
 
 			$datepickerInput.val(dateString);
-			$datepickerInput.trigger('blur');
+			$datepickerInput.trigger('change');
 			formatted = $datepicker.datepicker('getFormattedDate');
 
 			equal( formatted, dateString, 'moment.js formatted date should be equal to input');
@@ -384,7 +384,7 @@ define(function(require){
 			equal($datepicker.datepicker('getFormattedDate'), date, 'moment.js parsed date correctly after initialization with de culture');
 
 			$input.val('aa.bb.cccc');
-			$input.trigger('blur');
+			$input.trigger('change');
 			dateString = $datepicker.datepicker('getDate').toString();
 			equal((dateString==='Invalid Date' || dateString==='NaN'), true, 'datepicker should return \'Invalid Date\' or \'NaN\' when bad data is entered');
 		});

diff --git a/test/datepicker-test.js b/test/datepicker-test.js
@@ -117,7 +117,7 @@ define(function(require){
 		});
 
 		$datepickerInput.val('03/31/1987');
-		$datepickerInput.trigger('blur');
+		$datepickerInput.trigger('change');
 
 		equal(called, 1, 'Event was triggered as expected');
 		equal(typeof event, 'object', 'Appropriate event object passed back as argument');
@@ -191,7 +191,7 @@ define(function(require){
 		equal($datepicker.find('.datepicker-wheels-year').hasClass('hidden'), true, 'years wheel hidden');
 
 		$datepickerInput.val('03/31/1988');
-		$datepickerInput.trigger('blur');
+		$datepickerInput.trigger('change');
 		dateString = $datepicker.datepicker('getDate').toString();
 		equal((dateString==='Invalid Date' || dateString==='NaN'), true, 'user can\t input date outside current year');
 	});