Menu: Ignore bubbled mouseenter events on parent items

Test uses QUnit 2.x API - inconsistent with the other tests, but also
a good reference.

Fixes #11641
Closes gh-1535

Author: jzaefferer

tests/unit/menu/menu_events.js

@@ -111,6 +111,48 @@ asyncTest( "handle focus of menu with active item", function() {
 	});
 });
 
+test( "handle mouseenter on nested menu item", function( assert ) {
+	assert.expect( 8 );
+	$.ui.menu.prototype.delay = 1;
+	var activeItem,
+		done = assert.async(),
+		element = $( "#menu2" ).menu();
+
+	element
+		.menu( "previous" )
+		.menu( "expand" );
+
+	function checkSubmenus() {
+		equal( element.find( "ul[aria-expanded='true']" ).length, 2, "both submenus expanded" );
+	}
+	function menumouseenter1() {
+		element.menu( "expand" );
+		setTimeout( menumouseenter2, 25 );
+	}
+	function menumouseenter2() {
+		checkSubmenus();
+		activeItem = $( "#" + element.attr( "aria-activedescendant" ) );
+		assert.hasClasses( activeItem, "ui-state-active" );
+		activeItem.trigger( "mouseleave" );
+		setTimeout( menumouseenter3, 25 );
+	}
+	function menumouseenter3() {
+		checkSubmenus();
+		assert.lacksClasses( activeItem, "ui-state-active" );
+		activeItem.trigger( "mouseenter" );
+		setTimeout( menumouseenter4, 25 );
+	}
+	function menumouseenter4() {
+		checkSubmenus();
+		activeItem.parents( ".ui-menu-item" ).each( function( index, item ) {
+			assert.hasClasses( $( item ).children( ".ui-menu-item-wrapper" ), "ui-state-active" );
+		} );
+		$.ui.menu.prototype.delay = 300;
+		done();
+	}
+	setTimeout( menumouseenter1, 25 );
+} );
+
 asyncTest( "handle submenu auto collapse: mouseleave, default markup", function() {
 	expect( 4 );
 	$.ui.menu.prototype.delay = 1;

ui/menu.js

@@ -108,13 +108,22 @@ return $.widget( "ui.menu", {
 				}
 			},
 			"mouseenter .ui-menu-item": function( event ) {
+
 				// Ignore mouse events while typeahead is active, see #10458.
 				// Prevents focusing the wrong item when typeahead causes a scroll while the mouse
 				// is over an item in the menu
 				if ( this.previousFilter ) {
 					return;
 				}
-				var target = $( event.currentTarget );
+
+				var actualTarget = $( event.target ).closest( ".ui-menu-item" ),
+					target = $( event.currentTarget );
+
+				// Ignore bubbled events on parent items, see #11641
+				if ( actualTarget[ 0 ] !== target[ 0 ] ) {
+					return;
+				}
+
 				// Remove ui-state-active class from siblings of the newly focused menu item
 				// to avoid a jump caused by adjacent elements both having a class with a border
 				this._removeClass( target.siblings().children( ".ui-state-active" ),