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

This issue was introduced by 0bbd1569182bc03e8dc4f5f8aa203e8edbe15f99,
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

diff --git a/tests/unit/menu/core.js b/tests/unit/menu/core.js
index a8e0ece00a3bd295822e2688479428c279d7136e..200812f4ed6287b69017b25ec35dfe200f6556ee 100644 (file)
--- a/tests/unit/menu/core.js
+++ b/tests/unit/menu/core.js
@@ -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 );
+               } );
+       } );
+} );
+
 } );

diff --git a/ui/widgets/menu.js b/ui/widgets/menu.js
index e7b13e7c958d4bc2b8c1965ddca3f04ab0e12dd4..c5627cc20713ef93c5796cfbb8113eb94542307d 100644 (file)
--- a/ui/widgets/menu.js
+++ b/ui/widgets/menu.js
@@ -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" )
-                               .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" );
+               startMenu.find( ".ui-menu" )
+                       .hide()
+                       .attr( "aria-hidden", "true" )
+                       .attr( "aria-expanded", "false" );
        },
 
        _closeOnDocumentClick: function( event ) {