mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 07:06:36 +02:00
Code Issues Releases Wiki 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
3 changed files with 66 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 = [