Spinner: Handle async focus events in IE. Fixes incorrect detection of changes.

tests/unit/spinner/spinner_events.js

@@ -121,7 +121,7 @@ test( "stop", function() {
 	element.spinner( "value", 999 );
 });
 
-test( "change", function() {
+asyncTest( "change", function() {
 	expect( 14 );
 	var element = $( "#spin" ).spinner();
 
@@ -174,11 +174,13 @@ test( "change", function() {
 	shouldChange( false, "button up, before blur" );
 	element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
 	shouldChange( true, "blur after button up" );
+	setTimeout(function() {
 		element.blur();
 
 		shouldChange( false, "button down, before blur" );
 		element.spinner( "widget" ).find( ".ui-spinner-down" ).mousedown().mouseup();
 		shouldChange( true, "blur after button down" );
+		setTimeout(function() {
 			element.blur();
 
 			shouldChange( false, "many buttons, same final value, before blur" );
@@ -188,7 +190,7 @@ test( "change", function() {
 			element.spinner( "widget" ).find( ".ui-spinner-down" ).mousedown().mouseup();
 			shouldChange( false, "blur after many buttons, same final value" );
 			element.blur();
-
+			setTimeout(function() {
 				shouldChange( true, "stepUp" );
 				element.spinner( "stepUp" );
 
@@ -218,6 +220,10 @@ test( "change", function() {
 
 				shouldChange( false, "min, value not changed" );
 				element.spinner( "option", "min", 200 );
+				start();
+			});
+		});
+	});
 });
 
 })( jQuery );

ui/jquery.ui.spinner.js

@@ -93,6 +93,11 @@ $.widget( "ui.spinner", {
 			this.previous = this.element.val();
 		},
 		blur: function( event ) {
+			if ( this.cancelBlur ) {
+				delete this.cancelBlur;
+				return;
+			}
+
 			this._refresh();
 			this.uiSpinner.removeClass( "ui-state-active" );
 			if ( this.previous !== this.element.val() ) {
@@ -117,11 +122,42 @@ $.widget( "ui.spinner", {
 			event.preventDefault();
 		},
 		"mousedown .ui-spinner-button": function( event ) {
+			var previous;
+
+			// We never want the buttons to have focus; whenever the user is
+			// interacting with the spinner, the focus should be on the input.
+			// If the input is focused then this.previous is properly set from
+			// when the input first received focus. If the input is not focused
+			// then we need to set this.previous based on the value before spinning.
+			previous = this.element[0] === this.document[0].activeElement ?
+				this.previous : this.element.val();
+			function checkFocus() {
+				var isActive = this.element[0] === this.document[0].activeElement;
+				if ( !isActive ) {
+					this.element.focus();
+					this.previous = previous;
+					// support: IE
+					// IE sets focus asynchronously, so we need to check if focus
+					// moved off of the input because the user clicked on the button.
+					this._delay(function() {
+						this.previous = previous;
+					});
+				}
+			}
+
 			// ensure focus is on (or stays on) the text field
 			event.preventDefault();
-			if ( this.document[0].activeElement !== this.element[ 0 ] ) {
+			checkFocus.call( this );
-				this.element.focus();
+
-			}
+			// support: IE
+			// IE doesn't prevent moving focus even with event.preventDefault()
+			// so we set a flag to know when we should ignore the blur event
+			// and check (again) if focus moved off of the input.
+			this.cancelBlur = true;
+			this._delay(function() {
+				delete this.cancelBlur;
+				checkFocus.call( this );
+			});
 
 			if ( this._start( event ) === false ) {
 				return;