Fixes #1433

Changed events from on blur to on change. Changed the events in the test to be change instead of blur because of the new listener that has been setup.
ExactTarget · Aug 5, 2015 · 1603c0f · 1603c0f
1 parent 20695a9
commit 1603c0f
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');
 	});