Dropdown: Simplify dataKeyApiHandler (#35870)

* Dropdown.js: Remove duplicated check for `Not Shown` instance

* Dropdown.js: Rearrange `dataApiKeydownHandler` checks

* Dropdown: do some fixup inside `dataApiKeydownHandler`

* Update dropdown.js

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 2f7ca130fbd28fe76c31a32377467f306c163a6c..c93739b5238f33a495d48e68eaa156bdac63f052 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -48,8 +48,6 @@ const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_DROPUP = 'dropup'
 const CLASS_NAME_DROPEND = 'dropend'
 const CLASS_NAME_DROPSTART = 'dropstart'
-const CLASS_NAME_DROPUP_CENTER = 'dropup-center'
-const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
 const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
@@ -64,8 +62,6 @@ const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start'
 const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
 const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
 const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
-const PLACEMENT_TOPCENTER = 'top'
-const PLACEMENT_BOTTOMCENTER = 'bottom'
 
 const Default = {
   offset: [0, 2],
@@ -252,14 +248,6 @@ class Dropdown extends BaseComponent {
       return PLACEMENT_LEFT
     }
 
-    if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) {
-      return PLACEMENT_TOPCENTER
-    }
-
-    if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) {
-      return PLACEMENT_BOTTOMCENTER
-    }
-
     // We need to trim the value because custom properties can also include spaces
     const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'
 
@@ -388,38 +376,27 @@ class Dropdown extends BaseComponent {
   }
 
   static dataApiKeydownHandler(event) {
-    // If not input/textarea:
-    //  - And not a key in UP | DOWN | ESCAPE => not a dropdown command
-    // If input/textarea && If key is other than ESCAPE
-    //    - If key is not UP or DOWN => not a dropdown command
-    //    - If trigger inside the menu => not a dropdown command
-
-    const { target, key, delegateTarget } = event
-    const isInput = /input|textarea/i.test(target.tagName)
-    const isEscapeEvent = key === ESCAPE_KEY
-    const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(key)
-
-    if (!isInput && !(isUpOrDownEvent || isEscapeEvent)) {
+    // If not an UP | DOWN | ESCAPE key => not a dropdown command
+    // If input/textarea && if key is other than ESCAPE => not a dropdown command
+
+    const isInput = /input|textarea/i.test(event.target.tagName)
+    const isEscapeEvent = event.key === ESCAPE_KEY
+    const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)
+
+    if (!isUpOrDownEvent && !isEscapeEvent) {
       return
     }
 
     if (isInput && !isEscapeEvent) {
-      // eslint-disable-next-line unicorn/no-lonely-if
-      if (!isUpOrDownEvent || target.closest(SELECTOR_MENU)) {
-        return
-      }
-    }
-
-    const isActive = delegateTarget.classList.contains(CLASS_NAME_SHOW)
-
-    if (!isActive && isEscapeEvent) {
       return
     }
 
     event.preventDefault()
-    event.stopPropagation()
+    if (!isEscapeEvent) {
+      event.stopPropagation()
+    }
 
-    const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, delegateTarget.parentNode)
+    const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode)
     const instance = Dropdown.getOrCreateInstance(getToggleButton)
 
     if (isEscapeEvent) {
@@ -428,10 +405,8 @@ class Dropdown extends BaseComponent {
       return
     }
 
-    if (isUpOrDownEvent) {
-      instance.show()
-      instance._selectMenuItem(event)
-    }
+    instance.show()
+    instance._selectMenuItem(event)
   }
 }