From: GeoSot <geo.sotis@gmail.com>
Date: Sun, 30 Jan 2022 21:50:22 +0000 (+0200)
Subject: Dropdown: merge instance identification in `dataApiKeydownHandler`
X-Git-Tag: v5.2.0-beta1~288
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=d10543923531d9a2bf0e122439d5b1a2ae4e3d13;p=thirdparty%2Fbootstrap.git

Dropdown: merge instance identification in `dataApiKeydownHandler`

As we use the `dataApiKeydownHandler` only for events that are triggered on `[data-bs-toggle="dropdown"]` or on `.dropdown-menu`, we can ensure that their `parentNode` will ALWAYS be the `.dropdown` wrapper
---

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index f636304095..779fe8f193 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -414,7 +414,7 @@ class Dropdown extends BaseComponent {
       return
     }
 
-    const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
+    const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode)
     const instance = Dropdown.getOrCreateInstance(getToggleButton)
 
     if (isEscapeEvent) {
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index f24b59ed5c..194e00f537 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -2023,6 +2023,26 @@ describe('Dropdown', () => {
         dropdownToggle.click()
       })
     })
+
+    it('should be able to identify clicked dropdown, no matter the markup order', () => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Dropdown item</a>',
+        '  </div>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
+        '</div>'
+      ].join('')
+
+      const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+      const spy = spyOn(Dropdown, 'getOrCreateInstance').and.callThrough()
+
+      dropdownToggle.click()
+      expect(spy).toHaveBeenCalledWith(dropdownToggle)
+      dropdownMenu.click()
+      expect(spy).toHaveBeenCalledWith(dropdownToggle)
+    })
   })
 
   describe('jQueryInterface', () => {