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.

This commit is contained in:
meh-cfl 2011-11-28 16:33:23 -05:00 committed by Scott González
parent 74a3f2ce08
commit 06f6fa8524
2 changed files with 100 additions and 12 deletions

View File

@ -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 ) );

View File

@ -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();
}
}
});