From d10543923531d9a2bf0e122439d5b1a2ae4e3d13 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 30 Jan 2022 23:50:22 +0200 Subject: [PATCH] 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 --- js/src/dropdown.js | 2 +- js/tests/unit/dropdown.spec.js | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index f63630409..779fe8f19 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 f24b59ed5..194e00f53 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 = [ + '' + ].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', () => {