rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

fix(dropdowns): Fix multiple dropdowns when they are inside the same tag (#37011)

Browse Source
This commit is contained in:
Louis-Maxime Piton 2022-09-02 09:52:33 +02:00 committed by GitHub
parent 54b4b2c66a
commit 337068f8b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.bundlewatch.config.json
View File

@ -42,7 +42,7 @@
},
{
"path": "./dist/js/bootstrap.esm.js",
"maxSize": "27.75 kB"
"maxSize": "28.0 kB"
},
{
"path": "./dist/js/bootstrap.esm.min.js",

6
js/src/dropdown.js
View File

@ -95,7 +95,8 @@ class Dropdown extends BaseComponent {
this._popper = null
this._parent = this._element.parentNode // dropdown wrapper
this._menu = SelectorEngine.findOne(SELECTOR_MENU, this._parent)
// 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._inNavbar = this._detectNavbar()
}
@ -405,7 +406,8 @@ class Dropdown extends BaseComponent {
event.preventDefault()
const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode)
// 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 instance = Dropdown.getOrCreateInstance(getToggleButton)
if (isUpOrDownEvent) {

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

@ -1458,6 +1458,67 @@ describe('Dropdown', () => {
})
})
it('should be able to identify clicked dropdown, even with multiple dropdowns in the same tag', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button id="dropdown1" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
' <div id="menu1" class="dropdown-menu">',
' <a class="dropdown-item" href="#">Dropdown item</a>',
' </div>',
' <button id="dropdown2" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
' <div id="menu2" class="dropdown-menu">',
' <a class="dropdown-item" href="#">Dropdown item</a>',
' </div>',
'</div>'
].join('')
const dropdownToggle1 = fixtureEl.querySelector('#dropdown1')
const dropdownToggle2 = fixtureEl.querySelector('#dropdown2')
const dropdownMenu1 = fixtureEl.querySelector('#menu1')
const dropdownMenu2 = fixtureEl.querySelector('#menu2')
const spy = spyOn(Dropdown, 'getOrCreateInstance').and.callThrough()
dropdownToggle1.click()
expect(spy).toHaveBeenCalledWith(dropdownToggle1)
dropdownToggle2.click()
expect(spy).toHaveBeenCalledWith(dropdownToggle2)
dropdownMenu1.click()
expect(spy).toHaveBeenCalledWith(dropdownToggle1)
dropdownMenu2.click()
expect(spy).toHaveBeenCalledWith(dropdownToggle2)
})
it('should be able to show the proper menu, even with multiple dropdowns in the same tag', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button id="dropdown1" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
' <div id="menu1" class="dropdown-menu">',
' <a class="dropdown-item" href="#">Dropdown item</a>',
' </div>',
' <button id="dropdown2" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
' <div id="menu2" class="dropdown-menu">',
' <a class="dropdown-item" href="#">Dropdown item</a>',
' </div>',
'</div>'
].join('')
const dropdownToggle1 = fixtureEl.querySelector('#dropdown1')
const dropdownToggle2 = fixtureEl.querySelector('#dropdown2')
const dropdownMenu1 = fixtureEl.querySelector('#menu1')
const dropdownMenu2 = fixtureEl.querySelector('#menu2')
dropdownToggle1.click()
expect(dropdownMenu1).toHaveClass('show')
expect(dropdownMenu2).not.toHaveClass('show')
dropdownToggle2.click()
expect(dropdownMenu1).not.toHaveClass('show')
expect(dropdownMenu2).toHaveClass('show')
})
it('should fire hide and hidden event without a clickEvent if event type is not click', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [