rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00
Code Issues Actions Packages Releases Activity

Dropdown: fix case with invalid markup (#37190)

Browse Source 
This fixes a backward incompatible change in v5.2.1 where `.drodown-toggle` isn't present in the markup.
This commit is contained in:
GeoSot 2022-09-27 10:39:11 +03:00 committed by GitHub
parent e77367dddc
commit 597c402314
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/src/dropdown.js
View File

@ -96,7 +96,9 @@ class Dropdown extends BaseComponent {
this._popper = null this._popper = null
this._parent = this._element.parentNode // dropdown wrapper this._parent = this._element.parentNode // dropdown wrapper
// todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ // 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() this._inNavbar = this._detectNavbar()
} }
@ -407,7 +409,12 @@ class Dropdown extends BaseComponent {
event.preventDefault() event.preventDefault()
// todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ // 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) const instance = Dropdown.getOrCreateInstance(getToggleButton)
if (isUpOrDownEvent) { if (isUpOrDownEvent) {

22
js/tests/unit/dropdown.spec.js
View File

@ -57,6 +57,28 @@ describe('Dropdown', () => {
expect(dropdownByElement._element).toEqual(btnDropdown) 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', () => { it('should create offset modifier correctly when offset option is a function', () => {
return new Promise(resolve => { return new Promise(resolve => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [