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
jquery · Apr 8, 2015 · c770605db05347edfa9c6224aebd42974092ed22 · c770605
1 parent 2d0f05b
commit c770605db05347edfa9c6224aebd42974092ed22
Unified Split

Showing with 52 additions and 1 deletion.

+42 −0 tests/unit/menu/menu_events.js

+10 −1 ui/menu.js
diff --git a/tests/unit/menu/menu_events.js b/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;

diff --git a/ui/menu.js b/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" ),