Refactor dropdown's hide functionality

twbs · Apr 14, 2021 · b5d02f4 · b5d02f4
1 parent 6fe75df
commit b5d02f4
Showing 1 changed file with 33 additions and 50 deletions.
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -212,28 +212,7 @@ class Dropdown extends BaseComponent {
       relatedTarget: this._element
     }
 
-    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget)
-
-    if (hideEvent.defaultPrevented) {
-      return
-    }
-
-    // If this is a touch-enabled device we remove the extra
-    // empty mouseover listeners we added for iOS support
-    if ('ontouchstart' in document.documentElement) {
-      [].concat(...document.body.children)
-        .forEach(elem => EventHandler.off(elem, 'mouseover', noop))
-    }
-
-    if (this._popper) {
-      this._popper.destroy()
-    }
-
-    this._menu.classList.toggle(CLASS_NAME_SHOW)
-    this._element.classList.toggle(CLASS_NAME_SHOW)
-    this._element.setAttribute('aria-expanded', 'false')
-    Manipulator.removeDataAttribute(this._menu, 'popper')
-    EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
+    this._completeHide(this._element, this._menu, relatedTarget)
   }
 
   dispose() {
@@ -263,6 +242,30 @@ class Dropdown extends BaseComponent {
     })
   }
 
+  _completeHide(element, menu, relatedTarget) {
+    const hideEvent = EventHandler.trigger(element, EVENT_HIDE, relatedTarget)
+    if (hideEvent.defaultPrevented) {
+      return
+    }
+
+    // If this is a touch-enabled device we remove the extra
+    // empty mouseover listeners we added for iOS support
+    if ('ontouchstart' in document.documentElement) {
+      [].concat(...document.body.children)
+        .forEach(elem => EventHandler.off(elem, 'mouseover', noop))
+    }
+
+    if (this._popper) {
+      this._popper.destroy()
+    }
+
+    menu.classList.toggle(CLASS_NAME_SHOW)
+    element.classList.toggle(CLASS_NAME_SHOW)
+    element.setAttribute('aria-expanded', 'false')
+    Manipulator.removeDataAttribute(menu, 'popper')
+    EventHandler.trigger(element, EVENT_HIDDEN, relatedTarget)
+  }
+
   _getConfig(config) {
     config = {
       ...this.constructor.Default,
@@ -421,14 +424,6 @@ class Dropdown extends BaseComponent {
 
     for (let i = 0, len = toggles.length; i < len; i++) {
       const context = Data.get(toggles[i], DATA_KEY)
-      const relatedTarget = {
-        relatedTarget: toggles[i]
-      }
-
-      if (event && event.type === 'click') {
-        relatedTarget.clickEvent = event
-      }
-
       if (!context) {
         continue
       }
@@ -438,6 +433,10 @@ class Dropdown extends BaseComponent {
         continue
       }
 
+      const relatedTarget = {
+        relatedTarget: toggles[i]
+      }
+
       if (event) {
         // Don't close the menu if the clicked element or one of its parents is the dropdown button
         if ([context._element].some(element => event.composedPath().includes(element))) {
@@ -448,29 +447,13 @@ class Dropdown extends BaseComponent {
         if (event.type === 'keyup' && event.key === TAB_KEY && dropdownMenu.contains(event.target)) {
           continue
         }
-      }
 
-      const hideEvent = EventHandler.trigger(toggles[i], EVENT_HIDE, relatedTarget)
-      if (hideEvent.defaultPrevented) {
-        continue
-      }
-
-      // If this is a touch-enabled device we remove the extra
-      // empty mouseover listeners we added for iOS support
-      if ('ontouchstart' in document.documentElement) {
-        [].concat(...document.body.children)
-          .forEach(elem => EventHandler.off(elem, 'mouseover', noop))
-      }
-
-      if (context._popper) {
-        context._popper.destroy()
+        if (event.type === 'click') {
+          relatedTarget.clickEvent = event
+        }
       }
 
-      dropdownMenu.classList.remove(CLASS_NAME_SHOW)
-      toggles[i].classList.remove(CLASS_NAME_SHOW)
-      toggles[i].setAttribute('aria-expanded', 'false')
-      Manipulator.removeDataAttribute(dropdownMenu, 'popper')
-      EventHandler.trigger(toggles[i], EVENT_HIDDEN, relatedTarget)
+      context._completeHide(toggles[i], dropdownMenu, relatedTarget)
     }
   }