Fix dropdown issue related to odd interactions with visibility:hidden

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index db63ba200e8d682bcb2c6cd9f1a5c6e47c9332df..b3b6e18e9b70a77824cd807a064672b5590bac82 100644 (file)
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -274,8 +274,10 @@ class Dropdown extends Plugin {
     this.$anchor.addClass('hover')
         .attr({'aria-expanded': true});
     // this.$element/*.show()*/;
+
+    this.$element.addClass('is-opening');
     this._setPosition();
-    this.$element.addClass('is-open')
+    this.$element.removeClass('is-opening').addClass('is-open')
         .attr({'aria-hidden': false});
 
     if(this.options.autoFocus){

diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
index 7c791a733202d2f6120a4835dbb0a5e3de7262de..2d6366e943d08ca5f831982ae1d9f2763880915e 100644 (file)
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@@ -43,19 +43,26 @@ $dropdown-sizes: (
   position: absolute;
   z-index: 10;
 
-  display: block;
   width: $dropdown-width;
   padding: $dropdown-padding;
 
   visibility: hidden;
+  display: none;
   border: $dropdown-border;
   border-radius: $dropdown-radius;
   background-color: $dropdown-background;
 
   font-size: $dropdown-font-size;
 
+
+  // Allow an intermittent state to do positioning before making visible.
+  &.is-opening {
+    display: block;
+  }
+
   &.is-open {
     visibility: visible;
+    display: block;
   }
 }