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.

Author: meh-cfl

tests/unit/autocomplete/autocomplete_core.js

@@ -80,4 +80,90 @@ test( "allow form submit on enter when menu is not active", function() {
 	ok( !event.isDefaultPrevented(), "default action is prevented" );
 });
 
+(function() {
+	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 invokes search - contenteditable", function() {
+		arrowsInvokeSearch( "#autocomplete-contenteditable", true, false );
+	});
+
+	test( "down arrow invokes search - contenteditable", function() {
+		arrowsInvokeSearch( "#autocomplete-contenteditable", 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 );
+	});
+
+	test( "up arrow moves focus - contenteditable", function() {
+		arrowsMoveFocus( "#autocomplete-contenteditable", true );
+	});
+
+	test( "down arrow moves focus - contenteditable", function() {
+		arrowsMoveFocus( "#autocomplete-contenteditable", 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 ) } );
+	}
+})();
+
+(function() {
+
+})();
+
 }( jQuery ) );

ui/jquery.ui.autocomplete.js

@@ -58,6 +58,7 @@ $.widget( "ui.autocomplete", {
 			suppressKeyPressRepeat,
 			suppressInput;
 
+		this.isMultiLine = this.element.is( "textarea,[contenteditable]" );
 		this.valueMethod = this.element[ this.element.is( "input,textarea" ) ? "val" : "text" ];
 
 		this.element
@@ -92,15 +93,11 @@ $.widget( "ui.autocomplete", {
 					break;
 				case keyCode.UP:
 					suppressKeyPress = true;
-					self._move( "previous", event );
-					// prevent moving cursor to beginning of text field in some browsers
-					event.preventDefault();
+					self._keyEvent( "previous", event );
 					break;
 				case keyCode.DOWN:
 					suppressKeyPress = true;
-					self._move( "next", event );
-					// prevent moving cursor to end of text field in some browsers
-					event.preventDefault();
+					self._keyEvent( "next", event );
 					break;
 				case keyCode.ENTER:
 				case keyCode.NUMPAD_ENTER:
@@ -151,14 +148,10 @@ $.widget( "ui.autocomplete", {
 					self._move( "nextPage", event );
 					break;
 				case keyCode.UP:
-					self._move( "previous", event );
-					// prevent moving cursor to beginning of text field in some browsers
-					event.preventDefault();
+					self._keyEvent( "previous", event );
 					break;
 				case keyCode.DOWN:
-					self._move( "next", event );
-					// prevent moving cursor to end of text field in some browsers
-					event.preventDefault();
+					self._keyEvent( "next", event );
 					break;
 				}
 			})
@@ -495,6 +488,15 @@ $.widget( "ui.autocomplete", {
 
 	_value: function( value ) {
 		return this.valueMethod.apply( this.element, arguments );
+	},
+
+	_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();
+		}
 	}
 });