From: Kevin Ball <kmball11@gmail.com>
Date: Fri, 19 May 2017 00:03:17 +0000 (-0700)
Subject: Fix dropdown issue related to odd interactions with visibility:hidden
X-Git-Tag: v6.4.0-rc1~35^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10049%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Fix dropdown issue related to odd interactions with visibility:hidden
---

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index db63ba200..b3b6e18e9 100644
--- 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 7c791a733..2d6366e94 100644
--- 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;
   }
 }