Fix backdrop for dropdown menu on mobile (#21578)

- Create backdrop only if the menu is actually open (do not create it if the show event is prevented)
- Drop the backdrop only when the corresponding menu is closed (do not remove if there is no menu to close or if the hide event is prevented)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 1660d425755cd937fc669a81d669c30b01aec0cf..644273a0a73a44a6d42b09d950943b0d44fcb38d 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -97,16 +97,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
       }
@@ -118,6 +108,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)