mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
548fbf570c
This ensures that the menu will close if the user interacts with a draggable, resizable, etc. element since those interactions don't change focus. Ref #6642 Closes gh-1614
426 lines
12 KiB
JavaScript
426 lines
12 KiB
JavaScript
define( [
|
|
"jquery",
|
|
"ui/widgets/autocomplete"
|
|
], function( $ ) {
|
|
|
|
module( "autocomplete: core" );
|
|
|
|
test( "markup structure", function( assert ) {
|
|
expect( 2 );
|
|
var element = $( "#autocomplete" ).autocomplete(),
|
|
menu = element.autocomplete( "widget" );
|
|
|
|
assert.hasClasses( element, "ui-autocomplete-input" );
|
|
assert.hasClasses( menu, "ui-autocomplete ui-widget ui-widget-content" );
|
|
} );
|
|
|
|
test( "prevent form submit on enter when menu is active", function() {
|
|
expect( 2 );
|
|
var event,
|
|
element = $( "#autocomplete" )
|
|
.autocomplete( {
|
|
source: [ "java", "javascript" ]
|
|
} )
|
|
.val( "ja" )
|
|
.autocomplete( "search" ),
|
|
menu = element.autocomplete( "widget" );
|
|
|
|
event = $.Event( "keydown" );
|
|
event.keyCode = $.ui.keyCode.DOWN;
|
|
element.trigger( event );
|
|
equal( menu.find( ".ui-menu-item-wrapper.ui-state-active" ).length, 1,
|
|
"menu item is active" );
|
|
|
|
event = $.Event( "keydown" );
|
|
event.keyCode = $.ui.keyCode.ENTER;
|
|
element.trigger( event );
|
|
ok( event.isDefaultPrevented(), "default action is prevented" );
|
|
} );
|
|
|
|
test( "allow form submit on enter when menu is not active", function() {
|
|
expect( 1 );
|
|
var event,
|
|
element = $( "#autocomplete" )
|
|
.autocomplete( {
|
|
autoFocus: false,
|
|
source: [ "java", "javascript" ]
|
|
} )
|
|
.val( "ja" )
|
|
.autocomplete( "search" );
|
|
|
|
event = $.Event( "keydown" );
|
|
event.keyCode = $.ui.keyCode.ENTER;
|
|
element.trigger( event );
|
|
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 );
|
|
} );
|
|
|
|
test( "up arrow moves cursor - input", function() {
|
|
arrowsNavigateElement( "#autocomplete", true, false );
|
|
} );
|
|
|
|
test( "down arrow moves cursor - input", function() {
|
|
arrowsNavigateElement( "#autocomplete", false, false );
|
|
} );
|
|
|
|
test( "up arrow moves cursor - textarea", function() {
|
|
arrowsNavigateElement( "#autocomplete-textarea", true, true );
|
|
} );
|
|
|
|
test( "down arrow moves cursor - textarea", function() {
|
|
arrowsNavigateElement( "#autocomplete-textarea", false, true );
|
|
} );
|
|
|
|
test( "up arrow moves cursor - contenteditable", function() {
|
|
arrowsNavigateElement( "#autocomplete-contenteditable", true, true );
|
|
} );
|
|
|
|
test( "down arrow moves cursor - contenteditable", function() {
|
|
arrowsNavigateElement( "#autocomplete-contenteditable", false, true );
|
|
} );
|
|
|
|
function arrowsInvokeSearch( id, isKeyUp, shouldMove ) {
|
|
expect( 1 );
|
|
|
|
var didMove = false,
|
|
element = $( id ).autocomplete( {
|
|
source: [ "a" ],
|
|
delay: 0,
|
|
minLength: 0
|
|
} );
|
|
element.autocomplete( "instance" )._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 element = $( id ).autocomplete( {
|
|
source: [ "a" ],
|
|
delay: 0,
|
|
minLength: 0
|
|
} );
|
|
element.autocomplete( "instance" )._move = function() {
|
|
ok( true, "repsond to arrow" );
|
|
};
|
|
element.autocomplete( "search" );
|
|
element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
|
|
}
|
|
|
|
function arrowsNavigateElement( id, isKeyUp, shouldMove ) {
|
|
expect( 1 );
|
|
|
|
var didMove = false,
|
|
element = $( id ).autocomplete( {
|
|
source: [ "a" ],
|
|
delay: 0,
|
|
minLength: 0
|
|
} );
|
|
element.on( "keypress", function( e ) {
|
|
didMove = !e.isDefaultPrevented();
|
|
} );
|
|
element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
|
|
element.simulate( "keypress" );
|
|
equal( didMove, shouldMove, "respond to arrow" );
|
|
}
|
|
} )();
|
|
|
|
asyncTest( "past end of menu in multiline autocomplete", function() {
|
|
expect( 2 );
|
|
|
|
var customVal = "custom value",
|
|
element = $( "#autocomplete-contenteditable" ).autocomplete( {
|
|
delay: 0,
|
|
source: [ "javascript" ],
|
|
focus: function( event, ui ) {
|
|
equal( ui.item.value, "javascript", "Item gained focus" );
|
|
$( this ).text( customVal );
|
|
event.preventDefault();
|
|
}
|
|
} );
|
|
|
|
element
|
|
.simulate( "focus" )
|
|
.autocomplete( "search", "ja" );
|
|
|
|
setTimeout( function() {
|
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
|
equal( element.text(), customVal );
|
|
start();
|
|
} );
|
|
} );
|
|
|
|
asyncTest( "ESCAPE in multiline autocomplete", function() {
|
|
expect( 2 );
|
|
|
|
var customVal = "custom value",
|
|
element = $( "#autocomplete-contenteditable" ).autocomplete( {
|
|
delay: 0,
|
|
source: [ "javascript" ],
|
|
focus: function( event, ui ) {
|
|
equal( ui.item.value, "javascript", "Item gained focus" );
|
|
$( this ).text( customVal );
|
|
event.preventDefault();
|
|
}
|
|
} );
|
|
|
|
element
|
|
.simulate( "focus" )
|
|
.autocomplete( "search", "ja" );
|
|
|
|
setTimeout( function() {
|
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
|
|
equal( element.text(), customVal );
|
|
start();
|
|
} );
|
|
} );
|
|
|
|
asyncTest( "handle race condition", function() {
|
|
expect( 3 );
|
|
var count = 0,
|
|
element = $( "#autocomplete" ).autocomplete( {
|
|
source: function( request, response ) {
|
|
count++;
|
|
if ( request.term.length === 1 ) {
|
|
equal( count, 1, "request with 1 character is first" );
|
|
setTimeout( function() {
|
|
response( [ "one" ] );
|
|
setTimeout( checkResults );
|
|
} );
|
|
return;
|
|
}
|
|
equal( count, 2, "request with 2 characters is second" );
|
|
response( [ "two" ] );
|
|
}
|
|
} );
|
|
|
|
element.autocomplete( "search", "a" );
|
|
element.autocomplete( "search", "ab" );
|
|
|
|
function checkResults() {
|
|
equal( element.autocomplete( "widget" ).find( ".ui-menu-item" ).text(), "two",
|
|
"correct results displayed" );
|
|
start();
|
|
}
|
|
} );
|
|
|
|
asyncTest( "simultaneous searches (#9334)", function() {
|
|
expect( 2 );
|
|
var element = $( "#autocomplete" ).autocomplete( {
|
|
source: function( request, response ) {
|
|
setTimeout( function() {
|
|
response( [ request.term ] );
|
|
} );
|
|
},
|
|
response: function() {
|
|
ok( true, "response from first instance" );
|
|
}
|
|
} ),
|
|
element2 = $( "#autocomplete-textarea" ).autocomplete( {
|
|
source: function( request, response ) {
|
|
setTimeout( function() {
|
|
response( [ request.term ] );
|
|
} );
|
|
},
|
|
response: function() {
|
|
ok( true, "response from second instance" );
|
|
start();
|
|
}
|
|
} );
|
|
|
|
element.autocomplete( "search", "test" );
|
|
element2.autocomplete( "search", "test" );
|
|
} );
|
|
|
|
test( "ARIA", function() {
|
|
expect( 13 );
|
|
var element = $( "#autocomplete" ).autocomplete( {
|
|
source: [ "java", "javascript" ]
|
|
} ),
|
|
liveRegion = element.autocomplete( "instance" ).liveRegion;
|
|
|
|
equal( liveRegion.children().length, 0, "Empty live region on create" );
|
|
equal( liveRegion.attr( "aria-live" ), "assertive",
|
|
"Live region's aria-live attribute must be assertive" );
|
|
equal( liveRegion.attr( "aria-relevant" ), "additions",
|
|
"Live region's aria-relevant attribute must be additions" );
|
|
equal( liveRegion.attr( "role" ), "status",
|
|
"Live region's role attribute must be status" );
|
|
|
|
element.autocomplete( "search", "j" );
|
|
equal( liveRegion.children().first().text(),
|
|
"2 results are available, use up and down arrow keys to navigate.",
|
|
"Live region for multiple values" );
|
|
|
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
|
equal( liveRegion.children().filter( ":visible" ).text(), "java",
|
|
"Live region changed on keydown to announce the highlighted value" );
|
|
|
|
element.one( "autocompletefocus", function( event ) {
|
|
event.preventDefault();
|
|
} );
|
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
|
equal( liveRegion.children().filter( ":visible" ).text(), "javascript",
|
|
"Live region updated when default focus is prevented" );
|
|
|
|
element.autocomplete( "search", "javas" );
|
|
equal( liveRegion.children().filter( ":visible" ).text(),
|
|
"1 result is available, use up and down arrow keys to navigate.",
|
|
"Live region for one value" );
|
|
|
|
element.autocomplete( "search", "z" );
|
|
equal( liveRegion.children().filter( ":visible" ).text(), "No search results.",
|
|
"Live region for no values" );
|
|
|
|
equal( liveRegion.children().length, 5,
|
|
"Should be five children in the live region after the above" );
|
|
equal( liveRegion.children().filter( ":visible" ).length, 1,
|
|
"Only one should be still visible" );
|
|
ok( liveRegion.children().filter( ":visible" )[ 0 ] === liveRegion.children().last()[ 0 ],
|
|
"The last one should be the visible one" );
|
|
|
|
element.autocomplete( "destroy" );
|
|
equal( liveRegion.parent().length, 0,
|
|
"The liveRegion should be detached after destroy" );
|
|
} );
|
|
|
|
test( "ARIA, aria-label announcement", function() {
|
|
expect( 1 );
|
|
$.widget( "custom.catcomplete", $.ui.autocomplete, {
|
|
_renderMenu: function( ul, items ) {
|
|
var that = this;
|
|
$.each( items, function( index, item ) {
|
|
that._renderItemData( ul, item )
|
|
.attr( "aria-label", item.category + " : " + item.label );
|
|
} );
|
|
}
|
|
} );
|
|
var element = $( "#autocomplete" ).catcomplete( {
|
|
source: [ { label: "anders andersson", category: "People" } ]
|
|
} ),
|
|
liveRegion = element.catcomplete( "instance" ).liveRegion;
|
|
element.catcomplete( "search", "a" );
|
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
|
equal( liveRegion.children().filter( ":visible" ).text(), "People : anders andersson",
|
|
"Live region changed on keydown to announce the highlighted value's aria-label attribute" );
|
|
} );
|
|
|
|
test( "ARIA, init on detached input", function() {
|
|
expect( 1 );
|
|
var element = $( "<input>" ).autocomplete( {
|
|
source: [ "java", "javascript" ]
|
|
} ),
|
|
liveRegion = element.autocomplete( "instance" ).liveRegion;
|
|
equal( liveRegion.parent().length, 1, "liveRegion must have a parent" );
|
|
} );
|
|
|
|
test( ".replaceWith() (#9172)", function() {
|
|
expect( 1 );
|
|
|
|
var element = $( "#autocomplete" ).autocomplete(),
|
|
replacement = "<div>test</div>",
|
|
parent = element.parent();
|
|
element.replaceWith( replacement );
|
|
equal( parent.html().toLowerCase(), replacement );
|
|
} );
|
|
|
|
asyncTest( "Search if the user retypes the same value (#7434)", function() {
|
|
expect( 3 );
|
|
var element = $( "#autocomplete" ).autocomplete( {
|
|
source: [ "java", "javascript" ],
|
|
delay: 0
|
|
} ),
|
|
menu = element.autocomplete( "instance" ).menu.element;
|
|
|
|
element.val( "j" ).simulate( "keydown" );
|
|
setTimeout( function() {
|
|
ok( menu.is( ":visible" ), "menu displays initially" );
|
|
element.trigger( "blur" );
|
|
ok( !menu.is( ":visible" ), "menu hidden after blur" );
|
|
element.val( "j" ).simulate( "keydown" );
|
|
setTimeout( function() {
|
|
ok( menu.is( ":visible" ), "menu displays after typing the same value" );
|
|
start();
|
|
} );
|
|
} );
|
|
} );
|
|
|
|
asyncTest( "Close on click outside when focus remains", function() {
|
|
expect( 2 );
|
|
|
|
var element = $( "#autocomplete" ).autocomplete( {
|
|
source: [ "java", "javascript" ],
|
|
delay: 0
|
|
} );
|
|
var menu = element.autocomplete( "widget" );
|
|
|
|
$( "body" ).on( "mousedown", function( event ) {
|
|
event.preventDefault();
|
|
} );
|
|
|
|
element.val( "j" ).autocomplete( "search", "j" );
|
|
setTimeout(function() {
|
|
ok( menu.is( ":visible" ), "menu displays initially" );
|
|
$( "body" ).simulate( "mousedown" );
|
|
setTimeout(function() {
|
|
ok( menu.is( ":hidden" ), "menu closes after clicking elsewhere" );
|
|
start();
|
|
} );
|
|
} );
|
|
} );
|
|
|
|
} );
|