Autocomplete: Don't invoke a search from arrow keys when the element can have multi...

diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html
index 1e7b58e803dd9c84b1dbc60aa0ae53075b82cc45..88b7da4d852e08507e0fc3544f31d4cf62455add 100644 (file)
--- a/tests/unit/autocomplete/autocomplete.html
+++ b/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>

diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js
index 84f26980f40316d2f1debb88d20079fd335e4107..fa7dce610f273084acb5e30fcd3e09da6017453b 100644 (file)
--- a/tests/unit/autocomplete/autocomplete_core.js
+++ b/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 ) );

diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
index 5352c343231322958c694e9b3ac20649822b5dff..3a6f3468890748ac0ee9cd73197c49feff711201 100644 (file)
--- a/ui/jquery.ui.autocomplete.js
+++ b/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 );
-                                       // 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;
                                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();
+               }
        }
 });