Use next dropdown menu instead of first of the parent

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()
   }