mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Dropdown: fix case with invalid markup (#37190)
This fixes a backward incompatible change in v5.2.1 where `.drodown-toggle` isn't present in the markup.
This commit is contained in:
parent
e77367dddc
commit
597c402314
@ -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) {
|
||||
|
@ -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 = [
|
||||
'<div class="dropdown">',
|
||||
' <div class="dropdown-menu">',
|
||||
' <a class="dropdown-item" href="#">Link</a>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].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 = [
|
||||
|
Loading…
x
Reference in New Issue
Block a user