Fix dropdown escape propagation (#33479)

1 files changed, 35 insertions, 28 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 97bf6e1099..605cbc64db 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -443,6 +443,31 @@ class Dropdown extends BaseComponent {
     }
   }
 
+  static selectMenuItem(parent, event) {
+    const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent).filter(isVisible)
+
+    if (!items.length) {
+      return
+    }
+
+    let index = items.indexOf(event.target)
+
+    // Up
+    if (event.key === ARROW_UP_KEY && index > 0) {
+      index--
+    }
+
+    // Down
+    if (event.key === ARROW_DOWN_KEY && index < items.length - 1) {
+      index++
+    }
+
+    // index is -1 if the first keydown is an ArrowUp
+    index = index === -1 ? 0 : index
+
+    items[index].focus()
+  }
+
   static getParentFromElement(element) {
     return getElementFromSelector(element) || element.parentNode
   }
@@ -463,6 +488,12 @@ class Dropdown extends BaseComponent {
       return
     }
 
+    const isActive = this.classList.contains(CLASS_NAME_SHOW)
+
+    if (!isActive && event.key === ESCAPE_KEY) {
+      return
+    }
+
     event.preventDefault()
     event.stopPropagation()
 
@@ -470,19 +501,16 @@ class Dropdown extends BaseComponent {
       return
     }
 
-    const parent = Dropdown.getParentFromElement(this)
-    const isActive = this.classList.contains(CLASS_NAME_SHOW)
+    const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
 
     if (event.key === ESCAPE_KEY) {
-      const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
-      button.focus()
+      getToggleButton().focus()
       Dropdown.clearMenus()
       return
     }
 
     if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
-      const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
-      button.click()
+      getToggleButton().click()
       return
     }
 
@@ -491,28 +519,7 @@ class Dropdown extends BaseComponent {
       return
     }
 
-    const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent).filter(isVisible)
-
-    if (!items.length) {
-      return
-    }
-
-    let index = items.indexOf(event.target)
-
-    // Up
-    if (event.key === ARROW_UP_KEY && index > 0) {
-      index--
-    }
-
-    // Down
-    if (event.key === ARROW_DOWN_KEY && index < items.length - 1) {
-      index++
-    }
-
-    // index is -1 if the first keydown is an ArrowUp
-    index = index === -1 ? 0 : index
-
-    items[index].focus()
+    Dropdown.selectMenuItem(Dropdown.getParentFromElement(this), event)
   }
 }