Menu: Fix close delay and increase the default delay

Author: kborchers

tests/unit/menu/menu_events.js

@@ -93,12 +93,16 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() {
 		setTimeout(function() {
 			equal( $menu.find( "ul[aria-expanded='true']" ).length, 2, "second submenu expanded" );
 			$menu.find( "ul[aria-expanded='true']:first" ).trigger( "mouseleave" );
-			equal( $menu.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
-			$menu.trigger( "mouseleave" );
-			equal( $menu.find( "ul[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
-			start();
-		}, 400);
-	}, 200);
+			setTimeout(function() {
+				equal( $menu.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
+				$menu.trigger( "mouseleave" );
+				setTimeout(function() {
+					equal( $menu.find( "ul[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
+					start();
+				}, 1400);
+			}, 1050);
+		}, 700);
+	}, 350);
 });
 
 asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function() {
@@ -112,17 +116,19 @@ asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function
 		setTimeout(function() {
 			equal( $menu.find( "div[aria-expanded='true']" ).length, 2, "second submenu expanded" );
 			$menu.find( "div[aria-expanded='true']:first" ).trigger( "mouseleave" );
-			equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
-
-			$menu.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
-			ok( $menu.find( ".ui-state-active" ).is( "#menu5 :nth-child(7) a" ),
-				"down keypress selected an item from the first submenu" );
-			
-			$menu.trigger( "mouseleave" );
-			equal( $menu.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
-			start();
-		}, 400);
-	}, 200);
+			setTimeout(function() {
+				equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
+				$menu.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
+				ok( $menu.find( ".ui-state-active" ).is( "#menu5 :nth-child(7) a" ),
+					"down keypress selected an item from the first submenu" );
+				$menu.trigger( "mouseleave" );
+				setTimeout(function() {
+					equal( $menu.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
+					start();
+				}, 1400);
+			}, 1050);
+		}, 700);
+	}, 350);
 });
 
 

ui/jquery.ui.menu.js

@@ -18,7 +18,7 @@ var idIncrement = 0;
 $.widget( "ui.menu", {
 	version: "@VERSION",
 	defaultElement: "<ul>",
-	delay: 150,
+	delay: 300,
 	options: {
 		menus: "ul",
 		position: {
@@ -332,12 +332,12 @@ $.widget( "ui.menu", {
 	},
 
 	blur: function( event ) {
+		clearTimeout( this.timer );
+
 		if ( !this.active ) {
 			return;
 		}
 
-		clearTimeout( this.timer );
-
 		this.active.children( "a" ).removeClass( "ui-state-focus" );
 		this.active = null;
 
@@ -381,20 +381,22 @@ $.widget( "ui.menu", {
 	},
 
 	collapseAll: function( event, all ) {
+		clearTimeout( this.timer );
+		this.timer = this._delay( function() {
+			// if we were passed an event, look for the submenu that contains the event
+			var currentMenu = all ? this.element :
+				$( event && event.target ).closest( this.element.find( ".ui-menu" ) );
 
-		// if we were passed an event, look for the submenu that contains the event
-		var currentMenu = all ? this.element :
-			$( event && event.target ).closest( this.element.find( ".ui-menu" ) );
-
-		// if we found no valid submenu ancestor, use the main menu to close all sub menus anyway
-		if ( !currentMenu.length ) {
-			currentMenu = this.element;
-		}
+			// if we found no valid submenu ancestor, use the main menu to close all sub menus anyway
+			if ( !currentMenu.length ) {
+				currentMenu = this.element;
+			}
 
-		this._close( currentMenu );
+			this._close( currentMenu );
 
-		this.blur( event );
-		this.activeMenu = currentMenu;
+			this.blur( event );
+			this.activeMenu = currentMenu;
+		}, this.delay);
 	},
 
 	// With no arguments, closes the currently active menu - if nothing is active