Autocomplete: Cancel search when closing the menu. Fixes #7523 - Autocomplete cancel pending request when text changes below minLength.

Author: scottgonzalez

tests/unit/autocomplete/autocomplete_options.js

@@ -102,6 +102,39 @@ test( "minLength", function() {
 	ok( menu.is( ":visible" ), "blank enough for minLength: 0" );
 });
 
+asyncTest( "minLength, exceed then drop below", function() {
+	expect( 4 );
+	var element = $( "#autocomplete" ).autocomplete({
+			minLength: 2,
+			source: function( req, res ) {
+				equal( req.term, "12", "correct search term" );
+				setTimeout(function() {
+					res([ "item" ]);
+				}, 1 );
+			}
+		}),
+		menu = element.autocomplete( "widget" );
+
+	ok( menu.is( ":hidden" ), "menu is hidden before first search" );
+	element.autocomplete( "search", "12" );
+
+	ok( menu.is( ":hidden" ), "menu is hidden before second search" );
+	element.autocomplete( "search", "1" );
+
+	setTimeout(function() {
+		ok( menu.is( ":hidden" ), "menu is hidden after searches" );
+		start();
+	}, 50 );
+});
+
+// TODO: figure out how to implement this test
+// When fixing #7523, I couldn't figure out a test that would fail when
+// calling .close() (instead of ._close()) from ._response().
+// Use the remote demo and type "je", delete, "a", you should get results for "ja"
+// but if we call .close() from ._response() the results are ignored.
+//asyncTest( "minLength, exceed then drop below", function() {
+//});
+
 test( "source, local string array", function() {
 	expect( 1 );
 	var element = $( "#autocomplete" ).autocomplete({

ui/jquery.ui.autocomplete.js

@@ -383,7 +383,8 @@ $.widget( "ui.autocomplete", {
 			this._suggest( content );
 			this._trigger( "open" );
 		} else {
-			this.close();
+			// use ._close() instad of .close() so we don't cancel future searches
+			this._close();
 		}
 		this.pending--;
 		if ( !this.pending ) {
@@ -392,6 +393,11 @@ $.widget( "ui.autocomplete", {
 	},
 
 	close: function( event ) {
+		this.cancelSearch = true;
+		this._close( event );
+	},
+
+	_close: function( event ) {
 		clearTimeout( this.closing );
 		if ( this.menu.element.is(":visible") ) {
 			this.menu.element.hide();