Fix for sub menu zindex, fix for hiding sub menus when menu is hidden if no active item inside, fix for rapid alt tabbing keeps menu open, fix for hiding during show

src/definitions/modules/dropdown.js

@@ -193,6 +193,63 @@ $.fn.dropdown = function(parameters) {
           $item   = $menu.find(selector.item);
         },
 
+        toggle: function() {
+          module.verbose('Toggling menu visibility');
+          console.log(module.is.active());
+          if( !module.is.active() ) {
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Checking if dropdown can show');
+          if( !module.is.active() ) {
+            module.animate.show(function() {
+              if( module.can.click() ) {
+                module.bind.intent();
+              }
+              module.set.visible();
+            });
+            $.proxy(settings.onShow, element)();
+          }
+        },
+
+        hide: function() {
+          if( module.is.active() ) {
+            module.debug('Hiding dropdown');
+            module.animate.hide(function() {
+              module.remove.filteredItem();
+              module.remove.visible();
+            });
+            $.proxy(settings.onHide, element)();
+          }
+        },
+
+        hideOthers: function() {
+          module.verbose('Finding other dropdowns to hide');
+          $allModules
+            .not($module)
+              .has(selector.menu + ':visible:not(.' + className.animating + ')')
+                .dropdown('hide')
+          ;
+        },
+
+        hideSubMenus: function() {
+          var
+            $subMenus = $menu.find(selector.menu),
+            $activeSubMenu = $subMenus.has(selector.item + '.' + className.active)
+          ;
+          console.log($subMenus.not($activeSubMenu));
+          $subMenus
+            .not($activeSubMenu)
+              .removeClass(className.visible)
+              .removeAttr('style')
+          ;
+        },
+
         bind: {
           keyboardEvents: function() {
             module.debug('Binding keyboard events');
@@ -207,7 +264,7 @@ $.fn.dropdown = function(parameters) {
             if( module.is.searchSelection() ) {
               $module
                 .on('focus' + eventNamespace, selector.search, module.event.searchFocus)
-                .on('blur' + eventNamespace, selector.search, module.event.blur)
+                .on('blur' + eventNamespace, selector.search, module.event.searchBlur)
               ;
             }
             else {
@@ -319,10 +376,8 @@ $.fn.dropdown = function(parameters) {
             })
           ;
           $filteredItems = $item.not($results);
-          $item
+          module.remove.filteredItem();
-            .removeClass(className.filtered)
+          module.remove.selectedItem();
-            .removeClass(className.selected)
-          ;
           $filteredItems
             .addClass(className.filtered)
           ;
@@ -334,7 +389,7 @@ $.fn.dropdown = function(parameters) {
         },
 
         event: {
-          // prevents focus from occuring on mousedown
+          // prevents focus callback from occuring on mousedown
           mousedown: function() {
             activated = true;
           },
@@ -346,15 +401,18 @@ $.fn.dropdown = function(parameters) {
               module.show();
             }
           },
-          searchFocus: function() {
-            activated = true;
-            module.show();
-          },
           blur: function(event) {
             if(!activated) {
               module.hide();
             }
           },
+          searchFocus: function() {
+            activated = true;
+            module.show();
+          },
+          searchBlur: function(event) {
+            module.hide();
+          },
           input: function(event) {
             var
               query = $search.val()
@@ -854,10 +912,8 @@ $.fn.dropdown = function(parameters) {
                   ? $selectedItem.html()
                   : $selectedItem.text()
               ;
-              $item
+              module.remove.activeItem();
-                .removeClass(className.active)
+              module.remove.selectedItem();
-                .removeClass(className.selected)
-              ;
               $selectedItem
                 .addClass(className.active)
                 .addClass(className.selected)
@@ -873,6 +929,15 @@ $.fn.dropdown = function(parameters) {
           },
           visible: function() {
             $module.removeClass(className.visible);
+          },
+          activeItem: function() {
+            $item.removeClass(className.active);
+          },
+          filteredItem: function() {
+            $item.removeClass(className.filtered);
+          },
+          selectedItem: function() {
+            $item.removeClass(className.selected);
           }
         },
 
@@ -895,6 +960,9 @@ $.fn.dropdown = function(parameters) {
               : $menu.is(':animated') || $menu.transition && $menu.transition('is animating')
             ;
           },
+          active: function() {
+            return $module.hasClass(className.active);
+          },
           visible: function($subMenu) {
             return ($subMenu)
               ? $subMenu.is(':visible')
@@ -921,20 +989,29 @@ $.fn.dropdown = function(parameters) {
         animate: {
           show: function(callback, $subMenu) {
             var
-              $currentMenu = $subMenu || $menu
+              $currentMenu = $subMenu || $menu,
+              start = ($subMenu)
+                ? function() {}
+                : function() {
+                  module.hideOthers();
+                  module.set.active();
+                  module.set.scrollPosition();
+                }
             ;
             callback = callback || function(){};
+            module.verbose('Doing menu show animation', $currentMenu);
             if( module.is.hidden($currentMenu) ) {
-              module.verbose('Doing menu show animation', $currentMenu);
               if(settings.transition == 'none') {
                 $.proxy(callback, element)();
               }
               else if($.fn.transition !== undefined && $module.transition('is supported')) {
+                console.log('showing menu');
                 $currentMenu
                   .transition({
                     animation : settings.transition + ' in',
                     duration  : settings.duration,
                     queue     : true,
+                    start     : start,
                     complete  : function() {
                       $.proxy(callback, element)();
                     }
@@ -942,6 +1019,7 @@ $.fn.dropdown = function(parameters) {
                 ;
               }
               else if(settings.transition == 'slide down') {
+                start();
                 $currentMenu
                   .hide()
                   .clearQueue()
@@ -960,6 +1038,7 @@ $.fn.dropdown = function(parameters) {
                 ;
               }
               else if(settings.transition == 'fade') {
+                start();
                 $currentMenu
                   .hide()
                   .clearQueue()
@@ -976,7 +1055,16 @@ $.fn.dropdown = function(parameters) {
           },
           hide: function(callback, $subMenu) {
             var
-              $currentMenu = $subMenu || $menu
+              $currentMenu = $subMenu || $menu,
+              start = ($subMenu)
+                ? function() {}
+                : function() {
+                  if( module.can.click() ) {
+                    module.unbind.intent();
+                  }
+                  module.hideSubMenus();
+                  module.remove.active();
+                }
             ;
             callback = callback || function(){};
             if( module.is.visible($currentMenu) ) {
@@ -991,6 +1079,7 @@ $.fn.dropdown = function(parameters) {
                     animation : settings.transition + ' out',
                     duration  : settings.duration,
                     queue     : true,
+                    start     : start,
                     complete  : function() {
                       $.proxy(callback, element)();
                     }
@@ -998,6 +1087,7 @@ $.fn.dropdown = function(parameters) {
                 ;
               }
               else if(settings.transition == 'slide down') {
+                start();
                 $currentMenu
                   .show()
                   .clearQueue()
@@ -1016,6 +1106,7 @@ $.fn.dropdown = function(parameters) {
                 ;
               }
               else if(settings.transition == 'fade') {
+                start();
                 $currentMenu
                   .show()
                   .clearQueue()
@@ -1032,39 +1123,6 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
-        show: function() {
-          module.debug('Checking if dropdown can show');
-          if( module.is.hidden() ) {
-            module.hideOthers();
-            module.set.active();
-            module.set.scrollPosition();
-            module.animate.show(function() {
-              if( module.can.click() ) {
-                module.bind.intent();
-              }
-              module.set.visible();
-            });
-            $.proxy(settings.onShow, element)();
-          }
-        },
-
-        hide: function() {
-          if( !module.is.animated() && module.is.visible() ) {
-            module.debug('Hiding dropdown');
-            if( module.can.click() ) {
-              module.unbind.intent();
-            }
-            module.remove.active();
-            module.animate.hide(function() {
-              $item
-                .removeClass(className.filtered)
-              ;
-              module.remove.visible();
-            });
-            $.proxy(settings.onHide, element)();
-          }
-        },
-
         delay: {
           show: function() {
             module.verbose('Delaying show event to ensure user intent');
@@ -1078,25 +1136,6 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
-        hideOthers: function() {
-          module.verbose('Finding other dropdowns to hide');
-          $allModules
-            .not($module)
-              .has(selector.menu + ':visible')
-              .dropdown('hide')
-          ;
-        },
-
-        toggle: function() {
-          module.verbose('Toggling menu visibility');
-          if( module.is.hidden() ) {
-            module.show();
-          }
-          else {
-            module.hide();
-          }
-        },
-
         setting: function(name, value) {
           module.debug('Changing setting', name, value);
           if( $.isPlainObject(name) ) {
@@ -1330,6 +1369,7 @@ $.fn.dropdown.settings = {
 
   className : {
     active      : 'active',
+    animating   : 'animating',
     disabled    : 'disabled',
     dropdown    : 'ui dropdown',
     filtered    : 'filtered',

src/definitions/modules/dropdown.less

@@ -185,6 +185,7 @@
   right: @subMenuRight !important;
   margin: @subMenuMargin !important;
   border-radius: @subMenuBorderRadius !important;
+  z-index: @subMenuZIndex !important;
 }
 
 /* Hide Arrow */

src/themes/packages/default/modules/dropdown.variables

@@ -92,6 +92,7 @@
 @subMenuDistanceAway: -0.5em;
 @subMenuMargin: 0em 0em 0em @subMenuDistanceAway;
 @subMenuBorderRadius: 0em @borderRadius @borderRadius 0em;
+@subMenuZIndex: 21;
 
 /*-------------------
 b        Types