Merge branch 'v4-dev' into dropdown-keyboard

1 files changed, 17 insertions, 15 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 1e85c2530..d7eebd8c9 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -96,16 +96,6 @@ const Dropdown = (($) => {
         return false
       }
 
-      if ('ontouchstart' in document.documentElement &&
-         !$(parent).closest(Selector.NAVBAR_NAV).length) {
-
-        // if mobile we use a backdrop because click events don't delegate
-        const dropdown     = document.createElement('div')
-        dropdown.className = ClassName.BACKDROP
-        $(dropdown).insertBefore(this)
-        $(dropdown).on('click', Dropdown._clearMenus)
-      }
-
       const relatedTarget = {
         relatedTarget : this
       }
@@ -117,6 +107,17 @@ const Dropdown = (($) => {
         return false
       }
 
+      // set the backdrop only if the dropdown menu will be opened
+      if ('ontouchstart' in document.documentElement &&
+         !$(parent).closest(Selector.NAVBAR_NAV).length) {
+
+        // if mobile we use a backdrop because click events don't delegate
+        const dropdown     = document.createElement('div')
+        dropdown.className = ClassName.BACKDROP
+        $(dropdown).insertBefore(this)
+        $(dropdown).on('click', Dropdown._clearMenus)
+      }
+
       this.focus()
       this.setAttribute('aria-expanded', true)
 
@@ -166,11 +167,6 @@ const Dropdown = (($) => {
         return
       }
 
-      const backdrop = $(Selector.BACKDROP)[0]
-      if (backdrop) {
-        backdrop.parentNode.removeChild(backdrop)
-      }
-
       const toggles = $.makeArray($(Selector.DATA_TOGGLE))
 
       for (let i = 0; i < toggles.length; i++) {
@@ -195,6 +191,12 @@ const Dropdown = (($) => {
           continue
         }
 
+        // remove backdrop only if the dropdown menu will be hidden
+        const backdrop = $(parent).find(Selector.BACKDROP)[0]
+        if (backdrop) {
+          backdrop.parentNode.removeChild(backdrop)
+        }
+
         toggles[i].setAttribute('aria-expanded', 'false')
 
         $(parent)