Autocomplete: Don't invoke a search from arrow keys when the element can have multi-line text. Fixes #7639 - Key up/key down in textarea's should optionally not toggle auto-complete.

tests/unit/autocomplete/autocomplete.html

@@ -38,6 +38,7 @@
 
 	<div id="ac-wrap1" class="ac-wrap"></div>
 	<div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo" /></div>
+	<textarea id="autocomplete-textarea"></textarea>
 </div>
 
 </body>

tests/unit/autocomplete/autocomplete_core.js

@@ -97,5 +97,68 @@ asyncTest( "handle race condition", function() {
 		start();
 	}
 });
+test( "up arrow invokes search - input", function() {
+	arrowsInvokeSearch( "#autocomplete", true, true );
+});
+
+test( "down arrow invokes search - input", function() {
+	arrowsInvokeSearch( "#autocomplete", false, true );
+});
+
+test( "up arrow invokes search - textarea", function() {
+	arrowsInvokeSearch( "#autocomplete-textarea", true, false );
+});
+
+test( "down arrow invokes search - textarea", function() {
+	arrowsInvokeSearch( "#autocomplete-textarea", false, false );
+});
+
+test( "up arrow moves focus - input", function() {
+	arrowsMoveFocus( "#autocomplete", true );
+});
+
+test( "down arrow moves focus - input", function() {
+	arrowsMoveFocus( "#autocomplete", false );
+});
+
+test( "up arrow moves focus - textarea", function() {
+	arrowsMoveFocus( "#autocomplete-textarea", true );
+});
+
+test( "down arrow moves focus - textarea", function() {
+	arrowsMoveFocus( "#autocomplete-textarea", false );
+});
+
+function arrowsInvokeSearch( id, isKeyUp, shouldMove ) {
+	expect( 1 );
+
+	var didMove = false,
+		element = $( id ).autocomplete({
+			source: [ "a" ],
+			delay: 0,
+			minLength: 0
+		});
+	element.data( "autocomplete" )._move = function() {
+		didMove = true;
+	};
+	element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
+	equal( didMove, shouldMove, "respond to arrow" );
+}
+
+function arrowsMoveFocus( id, isKeyUp ) {
+	expect( 1 );
+
+	var didMove = false,
+		element = $( id ).autocomplete({
+			source: [ "a" ],
+			delay: 0,
+			minLength: 0
+		});
+	element.data( "autocomplete" )._move = function() {
+		ok( true, "repsond to arrow" );
+	};
+	element.autocomplete( "search" );
+	element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
+}
 
 }( jQuery ) );

ui/jquery.ui.autocomplete.js

@@ -37,6 +37,7 @@ $.widget( "ui.autocomplete", {
 		var self = this,
 			doc = this.element[ 0 ].ownerDocument,
 			suppressKeyPress;
+		this.isMultiLine = this.element.is( "textarea" );
 
 		this.element
 			.addClass( "ui-autocomplete-input" )
@@ -62,14 +63,10 @@ $.widget( "ui.autocomplete", {
 					self._move( "nextPage", event );
 					break;
 				case keyCode.UP:
-					self._move( "previous", event );
+					self._keyEvent( "previous", event );
-					// prevent moving cursor to beginning of text field in some browsers
-					event.preventDefault();
 					break;
 				case keyCode.DOWN:
-					self._move( "next", event );
+					self._keyEvent( "next", event );
-					// prevent moving cursor to end of text field in some browsers
-					event.preventDefault();
 					break;
 				case keyCode.ENTER:
 				case keyCode.NUMPAD_ENTER:
@@ -424,6 +421,14 @@ $.widget( "ui.autocomplete", {
 
 	widget: function() {
 		return this.menu.element;
+	},
+	_keyEvent: function( keyEvent, event ) {
+		if ( !this.isMultiLine || this.menu.element.is( ":visible" ) ) {
+			this._move( keyEvent, event );
+
+			// prevents moving cursor to beginning/end of the text field in some browsers
+			event.preventDefault();
+		}
 	}
 });