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

1 files changed, 30 insertions, 0 deletions

diff --git a/tests/unit/menu/core.js b/tests/unit/menu/core.js
index a8e0ece00..200812f4e 100644
--- 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 );
+		} );
+	} );
+} );
+
 } );