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

dropdown - destroy old popper.js references

Browse Source
This commit is contained in:
Johann-S 2019-08-18 22:05:20 +02:00
parent a5e725fa2e
commit 6885d65578
2 changed files with 44 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/src/dropdown/dropdown.js
View File

@ -155,10 +155,6 @@ class Dropdown {
// Disable totally Popper.js for Dropdown in Navbar
if (!this._inNavbar) {
/**
* Check for Popper dependency
* Popper - https://popper.js.org
*/
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s dropdowns require Popper.js (https://popper.js.org)')
}
@ -251,7 +247,7 @@ class Dropdown {
EventHandler.off(this._element, EVENT_KEY)
this._element = null
this._menu = null
if (this._popper !== null) {
if (this._popper) {
this._popper.destroy()
this._popper = null
}
@ -259,7 +255,7 @@ class Dropdown {
update() {
this._inNavbar = this._detectNavbar()
if (this._popper !== null) {
if (this._popper) {
this._popper.scheduleUpdate()
}
}
@ -440,6 +436,10 @@ class Dropdown {
toggles[i].setAttribute('aria-expanded', 'false')
if (context._popper) {
context._popper.destroy()
}
dropdownMenu.classList.remove(ClassName.SHOW)
parent.classList.remove(ClassName.SHOW)
EventHandler.trigger(parent, Event.HIDDEN, relatedTarget)

38
js/src/dropdown/dropdown.spec.js
View File

@ -147,6 +147,44 @@ describe('Dropdown', () => {
dropdown.toggle()
})
it('should destroy old popper references on toggle', done => {
fixtureEl.innerHTML = [
'<div class="first dropdown">',
' <button href="#" class="firstBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>',
'<div class="second dropdown">',
' <button href="#" class="secondBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown1 = fixtureEl.querySelector('.firstBtn')
const btnDropdown2 = fixtureEl.querySelector('.secondBtn')
const firstDropdownEl = fixtureEl.querySelector('.first')
const secondDropdownEl = fixtureEl.querySelector('.second')
const dropdown1 = new Dropdown(btnDropdown1)
const dropdown2 = new Dropdown(btnDropdown2)
firstDropdownEl.addEventListener('shown.bs.dropdown', () => {
expect(firstDropdownEl.classList.contains('show')).toEqual(true)
spyOn(dropdown1._popper, 'destroy')
dropdown2.toggle()
done()
})
secondDropdownEl.addEventListener('shown.bs.dropdown', () => {
expect(dropdown1._popper.destroy).toHaveBeenCalled()
done()
})
dropdown1.toggle()
})
it('should toggle a dropdown and add/remove event listener on mobile', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',