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

This issue was introduced by 0bbd156, 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
jquery · Mar 11, 2016 · 4866e14922217560f551b86ce80952c3e0f649da · 4866e14
1 parent 54cd451
commit 4866e14922217560f551b86ce80952c3e0f649da
Unified Split

Showing with 38 additions and 8 deletions.

+30 −0 tests/unit/menu/core.js

+8 −8 ui/widgets/menu.js
diff --git 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
@@ -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 ) {