diff --git a/js/src/dropdown.js b/js/src/dropdown.js index ae440e4724e3..c97c4ffff7e8 100644 --- 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) } }