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

Add missing things in hide method of dropdown (#33451)

Browse Source 
* Update `aria-expanded` attribute in `hide` method

* Remove empty mouseover listeners added for iOS
This commit is contained in:
Rohit Sharma 2021-04-02 00:21:55 +05:30 committed by GitHub
parent f36f834453
commit 20cfbdff79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/src/dropdown.js
View File

@ -218,12 +218,20 @@ class Dropdown extends BaseComponent {
return
}
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
[].concat(...document.body.children)
.forEach(elem => EventHandler.off(elem, 'mouseover', null, noop()))
}
if (this._popper) {
this._popper.destroy()
}
this._menu.classList.toggle(CLASS_NAME_SHOW)
this._element.classList.toggle(CLASS_NAME_SHOW)
this._element.setAttribute('aria-expanded', 'false')
Manipulator.removeDataAttribute(this._menu, 'popper')
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
}
@ -430,14 +438,13 @@ class Dropdown extends BaseComponent {
.forEach(elem => EventHandler.off(elem, 'mouseover', null, noop()))
}
toggles[i].setAttribute('aria-expanded', 'false')
if (context._popper) {
context._popper.destroy()
}
dropdownMenu.classList.remove(CLASS_NAME_SHOW)
toggles[i].classList.remove(CLASS_NAME_SHOW)
toggles[i].setAttribute('aria-expanded', 'false')
Manipulator.removeDataAttribute(dropdownMenu, 'popper')
EventHandler.trigger(toggles[i], EVENT_HIDDEN, relatedTarget)
}

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

@ -743,7 +743,7 @@ describe('Dropdown', () => {
it('should hide a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="true">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
@ -756,6 +756,7 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(dropdownMenu.classList.contains('show')).toEqual(false)
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
done()
})
@ -894,6 +895,39 @@ describe('Dropdown', () => {
done()
})
})
it('should remove event listener on touch-enabled device that was added in show method', done => {
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="#">Dropdwon item</a>',
' </div>',
'</div>'
].join('')
const defaultValueOnTouchStart = document.documentElement.ontouchstart
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(btnDropdown)
document.documentElement.ontouchstart = () => {}
spyOn(EventHandler, 'off')
btnDropdown.addEventListener('shown.bs.dropdown', () => {
dropdown.hide()
})
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(btnDropdown.classList.contains('show')).toEqual(false)
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
expect(EventHandler.off).toHaveBeenCalled()
document.documentElement.ontouchstart = defaultValueOnTouchStart
done()
})
dropdown.show()
})
})
describe('dispose', () => {