Menu: Added autoCollapse as the default and added a unit test

diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js
index 19ac11c68c8fb5ca83fa36032981064baf5ff2a5..ab691b782be495f89ea88409ba7f0ce180ac887d 100644 (file)
--- a/tests/unit/menu/menu_events.js
+++ b/tests/unit/menu/menu_events.js
@@ -41,6 +41,25 @@ test( "handle blur: click", function() {
        $("#remove").remove();
 });
 
+asyncTest( "handle submenu auto collapse: mouseleave", function() {
+       expect( 4 );
+       var $menu = $( "#menu2" ).menu();
+
+       $menu.find( "li:nth-child(7)" ).trigger( "mouseover" );
+       setTimeout(function() {
+               equal( $menu.find( "ul[aria-expanded='true']" ).length, 1, "first submenu expanded" );
+               $menu.find( "li:nth-child(7) li:first" ).trigger( "mouseover" );
+               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);
+});
+
 test("handle keyboard navigation on menu without scroll and without submenus", function() {
        expect(12);
        var element = $('#menu1').menu({

diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js
index 27e76d9097c2544a24e1c1348b485082ecb3c527..549eb5faee37b750cd900a77d8807dfaf913770c 100644 (file)
--- a/ui/jquery.ui.menu.js
+++ b/ui/jquery.ui.menu.js
@@ -62,6 +62,8 @@ $.widget( "ui.menu", {
                                target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
                                this.focus( event, target );
                        },
+                       "mouseleave": "_mouseleave",
+                       "mouseleave .ui-menu": "_mouseleave",
                        "mouseout .ui-menu-item": "blur",
                        "focus": function( event ) {
                                this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) );
@@ -346,21 +348,30 @@ $.widget( "ui.menu", {
        },
 
        collapseAll: function( event ) {
-               this.element
-                       .find( "ul" )
-                               .hide()
-                               .attr( "aria-hidden", "true" )
-                               .attr( "aria-expanded", "false" )
-                       .end()
-                       .find( "a.ui-state-active" )
-                       .removeClass( "ui-state-active" );
+               var currentMenu = false;
+               if ( event ) {
+                       var target = $( event.target );
+                       if ( target.is( "ui.menu" ) ) {
+                               currentMenu = target;
+                       } else if ( target.closest( ".ui-menu" ).length ) {
+                               currentMenu = target.closest( ".ui-menu" );
+                       }
+               }
 
-               this.blur( event );
-               this.activeMenu = this.element;
+               this._close( currentMenu );
+
+               if( !currentMenu ) {
+                       this.blur( event );
+                       this.activeMenu = this.element;
+               }
        },
 
-       _close: function() {
-               this.active.parent()
+       _close: function( startMenu ) {
+               if( !startMenu ) {
+                       startMenu = this.active ? this.active.parent() : this.element;
+               }
+
+               startMenu
                        .find( "ul" )
                                .hide()
                                .attr( "aria-hidden", "true" )
@@ -373,10 +384,7 @@ $.widget( "ui.menu", {
        collapse: function( event ) {
                var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first();
                if ( newItem && newItem.length ) {
-                       this.active.parent()
-                               .attr("aria-hidden", "true")
-                               .attr("aria-expanded", "false")
-                               .hide();
+                       this._close();
                        this.focus( event, newItem );
                        return true;
                }
@@ -486,6 +494,11 @@ $.widget( "ui.menu", {
                return this.element.height() < this.element.prop( "scrollHeight" );
        },
 
+       _mouseleave: function( event ) {
+               this.collapseAll( event );
+               this.blur();
+       },
+
        select: function( event ) {
                // save active reference before collapseAll triggers blur
                var ui = {