diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 607ab27ba7a6..f8dafc21bda6 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -96,7 +96,9 @@ class Dropdown extends BaseComponent { this._popper = null this._parent = this._element.parentNode // dropdown wrapper // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ - this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0] + this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || + SelectorEngine.prev(this._element, SELECTOR_MENU)[0] || + SelectorEngine.findOne(SELECTOR_MENU, this._parent) this._inNavbar = this._detectNavbar() } @@ -407,7 +409,12 @@ class Dropdown extends BaseComponent { event.preventDefault() // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ - const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] + const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? + this : + (SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || + SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] || + SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode)) + const instance = Dropdown.getOrCreateInstance(getToggleButton) if (isUpOrDownEvent) { diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index ea7ddace30f8..2bbd7c00a794 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -57,6 +57,28 @@ describe('Dropdown', () => { expect(dropdownByElement._element).toEqual(btnDropdown) }) + it('should work on invalid markup', () => { + return new Promise(resolve => { + // TODO: REMOVE in v6 + fixtureEl.innerHTML = [ + '' + ].join('') + + const dropdownElem = fixtureEl.querySelector('.dropdown-menu') + const dropdown = new Dropdown(dropdownElem) + + dropdownElem.addEventListener('shown.bs.dropdown', () => { + resolve() + }) + + dropdown.show() + }) + }) + it('should create offset modifier correctly when offset option is a function', () => { return new Promise(resolve => { fixtureEl.innerHTML = [