Autocomplete: Removed the timeout for the change event. Fixes #7550 - Autocomplete change event not triggered in time.

Thanks spekary for finding a workaround for IE.

Author: scottgonzalez

tests/unit/autocomplete/autocomplete_core.js

@@ -2,45 +2,6 @@
 
 module( "autocomplete: core" );
 
-asyncTest( "close-on-blur is properly delayed", function() {
-	expect( 3 );
-	var element = $( "#autocomplete" )
-			.autocomplete({
-				source: [ "java", "javascript" ]
-			})
-			.val( "ja" )
-			.autocomplete( "search" ),
-		menu = element.autocomplete( "widget" );
-
-	ok( menu.is( ":visible" ) );
-	element.blur();
-	ok( menu.is( ":visible" ) );
-	setTimeout(function() {
-		ok( menu.is( ":hidden") );
-		start();
-	}, 200 );
-});
-
-asyncTest( "close-on-blur is cancelled when starting a search", function() {
-	expect( 3 );
-	var element = $( "#autocomplete" )
-			.autocomplete({
-				source: [ "java", "javascript" ]
-			})
-			.val( "ja" )
-			.autocomplete( "search" ),
-		menu = element.autocomplete( "widget" );
-
-	ok( menu.is( ":visible" ) );
-	element.blur();
-	ok( menu.is( ":visible" ) );
-	element.autocomplete( "search" );
-	setTimeout(function() {
-		ok( menu.is( ":visible" ) );
-		start();
-	}, 200 );
-});
-
 test( "prevent form submit on enter when menu is active", function() {
 	expect( 2 );
 	var event,

tests/unit/autocomplete/autocomplete_events.js

@@ -68,7 +68,10 @@ $.each([
 			ok( menu.is( ":visible" ), "menu is visible after delay" );
 			element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
 			element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
-			element.simulate( "blur" );
+			// blur must be async for IE to handle it properly
+			setTimeout(function() {
+				element.simulate( "blur" );
+			}, 1 );
 		}, 50 );
 	});
 });

ui/jquery.ui.autocomplete.js

@@ -176,13 +176,14 @@ $.widget( "ui.autocomplete", {
 					return;
 				}
 
+				if ( self.cancelBlur ) {
+					delete self.cancelBlur;
+					return;
+				}
+
 				clearTimeout( self.searching );
-				self.cancelSearch = true;
-				// clicks on the menu (or a button to trigger a search) will cause a blur event
-				self.closing = setTimeout(function() {
-					self.close( event );
-					self._change( event );
-				}, 150 );
+				self.close( event );
+				self._change( event );
 			});
 		this._initSource();
 		this.response = function() {
@@ -193,6 +194,16 @@ $.widget( "ui.autocomplete", {
 			.appendTo( this.document.find( this.options.appendTo || "body" )[0] )
 			// prevent the close-on-blur in case of a "slow" click on the menu (long mousedown)
 			.mousedown(function( event ) {
+				// prevent moving focus out of the text field
+				event.preventDefault();
+
+				// IE doesn't prevent moving focus even with event.preventDefault()
+				// so we set a flag to know when we should ignore the blur event
+				self.cancelBlur = true;
+				setTimeout(function() {
+					delete self.cancelBlur;
+				}, 1 );
+
 				// clicking on the scrollbar causes focus to shift to the body
 				// but we can't detect a mouseup or a click immediately afterward
 				// so we have to track the next mousedown and close the menu if
@@ -209,11 +220,6 @@ $.widget( "ui.autocomplete", {
 						});
 					}, 1 );
 				}
-
-				// use another timeout to make sure the blur-event-handler on the input was already triggered
-				setTimeout(function() {
-					clearTimeout( self.closing );
-				}, 13);
 			})
 			.menu({
 				// custom key handling for now
@@ -358,7 +364,6 @@ $.widget( "ui.autocomplete", {
 			return this.close( event );
 		}
 
-		clearTimeout( this.closing );
 		if ( this._trigger( "search", event ) === false ) {
 			return;
 		}