diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2020-02-01 16:56:20 +0300 |
---|---|---|
committer | Martijn Cuppens <martijn.cuppens@gmail.com> | 2020-03-23 17:35:07 +0300 |
commit | 2e150e722a946f20ded62b39abe28f244f6ae050 (patch) | |
tree | b8e23908d7a08583f56367aa5190f68747dd345e /js/src | |
parent | 85b12549ecff83f866588394ecff747e69567bc4 (diff) |
Use next dropdown menu instead of first of the parent
Diffstat (limited to 'js/src')
-rw-r--r-- | js/src/dom/selector-engine.js | 14 | ||||
-rw-r--r-- | js/src/dropdown.js | 37 |
2 files changed, 31 insertions, 20 deletions
diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js index a8c14ae4c8..c18ec4136f 100644 --- a/js/src/dom/selector-engine.js +++ b/js/src/dom/selector-engine.js @@ -67,6 +67,20 @@ const SelectorEngine = { } return [] + }, + + next(element, selector) { + let next = element.nextElementSibling + + while (next) { + if (this.matches(next, selector)) { + return [next] + } + + next = next.nextElementSibling + } + + return [] } } diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 9d6f8a3296..b8f8c22b8c 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -129,7 +129,7 @@ class Dropdown { return } - const isActive = this._menu.classList.contains(CLASS_NAME_SHOW) + const isActive = this._element.classList.contains(CLASS_NAME_SHOW) Dropdown.clearMenus() @@ -150,7 +150,7 @@ class Dropdown { relatedTarget: this._element } - const showEvent = EventHandler.trigger(parent, EVENT_SHOW, relatedTarget) + const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, relatedTarget) if (showEvent.defaultPrevented) { return @@ -199,7 +199,7 @@ class Dropdown { this._element.setAttribute('aria-expanded', true) Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW) - Manipulator.toggleClass(parent, CLASS_NAME_SHOW) + Manipulator.toggleClass(this._element, CLASS_NAME_SHOW) EventHandler.trigger(parent, EVENT_SHOWN, relatedTarget) } @@ -224,7 +224,7 @@ class Dropdown { } Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW) - Manipulator.toggleClass(parent, CLASS_NAME_SHOW) + Manipulator.toggleClass(this._element, CLASS_NAME_SHOW) EventHandler.trigger(parent, EVENT_HIDDEN, relatedTarget) } @@ -273,9 +273,7 @@ class Dropdown { } _getMenuElement() { - const parent = Dropdown.getParentFromElement(this._element) - - return SelectorEngine.findOne(SELECTOR_MENU, parent) + return SelectorEngine.next(this._element, SELECTOR_MENU)[0] } _getPlacement() { @@ -397,14 +395,14 @@ class Dropdown { } const dropdownMenu = context._menu - if (!parent.classList.contains(CLASS_NAME_SHOW)) { + if (!toggles[i].classList.contains(CLASS_NAME_SHOW)) { continue } if (event && ((event.type === 'click' && /input|textarea/i.test(event.target.tagName)) || (event.type === 'keyup' && event.which === TAB_KEYCODE)) && - parent.contains(event.target)) { + dropdownMenu.contains(event.target)) { continue } @@ -427,7 +425,7 @@ class Dropdown { } dropdownMenu.classList.remove(CLASS_NAME_SHOW) - parent.classList.remove(CLASS_NAME_SHOW) + toggles[i].classList.remove(CLASS_NAME_SHOW) EventHandler.trigger(parent, EVENT_HIDDEN, relatedTarget) } } @@ -460,13 +458,16 @@ class Dropdown { } const parent = Dropdown.getParentFromElement(this) - const isActive = parent.classList.contains(CLASS_NAME_SHOW) + const isActive = this.classList.contains(CLASS_NAME_SHOW) - if (!isActive || (isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE))) { - if (event.which === ESCAPE_KEYCODE) { - SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, parent).focus() - } + if (event.which === ESCAPE_KEYCODE) { + const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] + button.focus() + Dropdown.clearMenus() + return + } + if (!isActive || event.which === SPACE_KEYCODE) { Dropdown.clearMenus() return } @@ -478,7 +479,7 @@ class Dropdown { return } - let index = items.indexOf(event.target) + let index = items.indexOf(event.target) || 0 if (event.which === ARROW_UP_KEYCODE && index > 0) { // Up index-- @@ -488,10 +489,6 @@ class Dropdown { index++ } - if (index < 0) { - index = 0 - } - items[index].focus() } |