Menu: Filter out non-items when typing

Fixes #10571
Closes gh-1329
This commit is contained in:
Simen Bekkhus 2014-08-29 14:18:47 +02:00 committed by Scott González
parent b20387ab36
commit e3e5a9ffa6
3 changed files with 43 additions and 13 deletions

View File

@ -306,6 +306,15 @@
<li>Amesville</li> <li>Amesville</li>
</ul> </ul>
<ul id="menu8">
<li class="foo">Aberdeen</li>
<li class="foo ui-state-disabled">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo">Addyston</li>
<li class="foo">-</li>
<li class="foo">-Saarland</li>
</ul>
</div> </div>
</body> </body>
</html> </html>

View File

@ -644,4 +644,21 @@ test( "#9469: Stopping propagation in a select event should not suppress subsequ
equal( logOutput(), "1,2", "Both select events were not triggered." ); equal( logOutput(), "1,2", "Both select events were not triggered." );
}); });
asyncTest( "#10571: When typing in a menu, only menu-items should be focused", function() {
expect( 3 );
var element = $( "#menu8" ).menu({
focus: function( event, ui ) {
equal( ui.item.length, 1, "There should only be one match when filtering" );
ok( ui.item.hasClass( "ui-menu-item" ), "element is .ui-menu-item" );
equal( ui.item.text(), "-Saarland", "element has correct text" );
}
});
setTimeout(function() {
element.menu( "widget" ).simulate( "keydown", { keyCode: "-".charCodeAt( 0 ) } );
start();
});
});
})( jQuery ); })( jQuery );

View File

@ -186,13 +186,9 @@ return $.widget( "ui.menu", {
}, },
_keydown: function( event ) { _keydown: function( event ) {
var match, prev, character, skip, regex, var match, prev, character, skip,
preventDefault = true; preventDefault = true;
function escape( value ) {
return value.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" );
}
switch ( event.keyCode ) { switch ( event.keyCode ) {
case $.ui.keyCode.PAGE_UP: case $.ui.keyCode.PAGE_UP:
this.previousPage( event ); this.previousPage( event );
@ -241,10 +237,7 @@ return $.widget( "ui.menu", {
character = prev + character; character = prev + character;
} }
regex = new RegExp( "^" + escape( character ), "i" ); match = this._filterMenuItems( character );
match = this.activeMenu.find( this.options.items ).filter(function() {
return regex.test( $( this ).text() );
});
match = skip && match.index( this.active.next() ) !== -1 ? match = skip && match.index( this.active.next() ) !== -1 ?
this.active.nextAll( ".ui-menu-item" ) : this.active.nextAll( ".ui-menu-item" ) :
match; match;
@ -253,10 +246,7 @@ return $.widget( "ui.menu", {
// to move down the menu to the first item that starts with that character // to move down the menu to the first item that starts with that character
if ( !match.length ) { if ( !match.length ) {
character = String.fromCharCode( event.keyCode ); character = String.fromCharCode( event.keyCode );
regex = new RegExp( "^" + escape( character ), "i" ); match = this._filterMenuItems( character );
match = this.activeMenu.find( this.options.items ).filter(function() {
return regex.test( $( this ).text() );
});
} }
if ( match.length ) { if ( match.length ) {
@ -640,6 +630,20 @@ return $.widget( "ui.menu", {
this.collapseAll( event, true ); this.collapseAll( event, true );
} }
this._trigger( "select", event, ui ); this._trigger( "select", event, ui );
},
_filterMenuItems: function(character) {
var escapedCharacter = character.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" ),
regex = new RegExp( "^" + escapedCharacter, "i" );
return this.activeMenu
.find( this.options.items )
// Only match on items, not dividers or other content (#10571)
.filter( ".ui-menu-item" )
.filter(function() {
return regex.test( $( this ).text() );
});
} }
}); });