mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 00:54:04 +02:00
Code Issues Releases Wiki Activity

Allow data-toggle="dropdown" and form click events to bubble

Browse Source 
* remove stopPropagation from button click event

* test for delegated click events

* ensure button children can open menu

* test to ensure clicking button opens the menu

* check current element and parents

* allow dropdown form click events to bubble
This commit is contained in:
Casey Holzer
2021-01-06 03:07:43 +02:00
committed by XhmikosR
parent 9667438c1e
commit 16bc47da3c
2 changed files with 68 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1020,13 +1020,13 @@ describe('Dropdown', () => {
showEventTriggered = true
})
btnDropdown.addEventListener('shown.bs.dropdown', e => {
btnDropdown.addEventListener('shown.bs.dropdown', e => setTimeout(() => {
expect(btnDropdown.classList.contains('show')).toEqual(true)
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
expect(showEventTriggered).toEqual(true)
expect(e.relatedTarget).toEqual(btnDropdown)
document.body.click()
})
}))
btnDropdown.addEventListener('hide.bs.dropdown', () => {
hideEventTriggered = true
@@ -1783,4 +1783,51 @@ describe('Dropdown', () => {
triggerDropdown.dispatchEvent(keydown)
})
it('should allow `data-bs-toggle="dropdown"` click events to bubble up', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const clickListener = jasmine.createSpy('clickListener')
const delegatedClickListener = jasmine.createSpy('delegatedClickListener')
btnDropdown.addEventListener('click', clickListener)
document.addEventListener('click', delegatedClickListener)
btnDropdown.click()
expect(clickListener).toHaveBeenCalled()
expect(delegatedClickListener).toHaveBeenCalled()
})
it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', done => {
fixtureEl.innerHTML = [
'<div class="container">',
' <div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown"><span id="childElement">Dropdown</span></button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#subMenu">Sub menu</a>',
' </div>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const childElement = fixtureEl.querySelector('#childElement')
btnDropdown.addEventListener('shown.bs.dropdown', () => setTimeout(() => {
expect(btnDropdown.classList.contains('show')).toEqual(true)
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
}))
childElement.click()
})
})