library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Menu: Remove active class from top-level item when menu is blurred

Browse Source 
This issue was introduced by 0bbd156918,
which reduced the use of ui-state-focus and ui-state-active to using
only ui-state-focus. This introduced the issue addressed here.

The fix is more of a workaround. With test test in place, we can
investigate a better solution in the future.

Fixes #14919
This commit is contained in:
Jörn Zaefferer 2016-03-11 17:35:25 +01:00
parent 54cd4510ef
commit 4866e14922
2 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
tests/unit/menu/core.js
View File

@ -73,4 +73,34 @@ asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected
} );
} );
asyncTest( "active menu item styling", function( assert ) {
expect( 5 );
function isActive( item ) {
assert.hasClasses( item.children( ".ui-menu-item-wrapper" ), "ui-state-active" );
}
function isInactive( item ) {
assert.lacksClasses( item.children( ".ui-menu-item-wrapper" ), "ui-state-active" );
}
$.ui.menu.prototype.delay = 0;
var element = $( "#menu4" ).menu();
var parentItem = element.children( "li:eq(1)" );
var childItem = parentItem.find( "li:eq(0)" );
element.menu( "focus", null, parentItem );
setTimeout( function() {
isActive( parentItem );
element.menu( "focus", null, childItem );
setTimeout( function() {
isActive( parentItem );
isActive( childItem );
element.blur();
setTimeout( function() {
isInactive( parentItem );
isInactive( childItem );
$.ui.menu.prototype.delay = 300;
start();
}, 50 );
} );
} );
} );
} );

12
ui/widgets/menu.js
View File

@ -487,6 +487,10 @@ return $.widget( "ui.menu", {
this._close( currentMenu );
this.blur( event );
// Work around active item staying active after menu is blurred
this._removeClass( currentMenu.find( ".ui-state-active" ), null, "ui-state-active" );
this.activeMenu = currentMenu;
}, this.delay );
},
@ -498,14 +502,10 @@ return $.widget( "ui.menu", {
startMenu = this.active ? this.active.parent() : this.element;
}
var active = startMenu
.find( ".ui-menu" )
startMenu.find( ".ui-menu" )
.hide()
.attr( "aria-hidden", "true" )
.attr( "aria-expanded", "false" )
.end()
.find( ".ui-state-active" ).not( ".ui-menu-item-wrapper" );
this._removeClass( active, null, "ui-state-active" );
.attr( "aria-expanded", "false" );
},
_closeOnDocumentClick: function( event ) {