root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

dropdown show method should do the same as toggle

This commit is contained in:
Johann-S 2019-08-22 22:02:06 +02:00
parent b02bae769e
commit a5cbb5e71a
2 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
js/src/dropdown/dropdown.js
View File

@ -135,7 +135,6 @@ class Dropdown {
return return
} }
const parent = Dropdown.getParentFromElement(this._element)
const isActive = this._menu.classList.contains(ClassName.SHOW) const isActive = this._menu.classList.contains(ClassName.SHOW)
Dropdown.clearMenus() Dropdown.clearMenus()
@ -144,9 +143,19 @@ class Dropdown {
return return
} }
this.show()
}
show() {
if (this._element.disabled || this._element.classList.contains(ClassName.DISABLED) || this._menu.classList.contains(ClassName.SHOW)) {
return
}
const parent = Dropdown.getParentFromElement(this._element)
const relatedTarget = { const relatedTarget = {
relatedTarget: this._element relatedTarget: this._element
} }
const showEvent = EventHandler.trigger(parent, Event.SHOW, relatedTarget) const showEvent = EventHandler.trigger(parent, Event.SHOW, relatedTarget)
if (showEvent.defaultPrevented) { if (showEvent.defaultPrevented) {
@ -200,27 +209,6 @@ class Dropdown {
EventHandler.trigger(parent, Event.SHOWN, relatedTarget) EventHandler.trigger(parent, Event.SHOWN, relatedTarget)
} }
show() {
if (this._element.disabled || this._element.classList.contains(ClassName.DISABLED) || this._menu.classList.contains(ClassName.SHOW)) {
return
}
const parent = Dropdown.getParentFromElement(this._element)
const relatedTarget = {
relatedTarget: this._element
}
const showEvent = EventHandler.trigger(parent, Event.SHOW, relatedTarget)
if (showEvent.defaultPrevented) {
return
}
Manipulator.toggleClass(this._menu, ClassName.SHOW)
Manipulator.toggleClass(parent, ClassName.SHOW)
EventHandler.trigger(parent, Event.SHOWN, relatedTarget)
}
hide() { hide() {
if (this._element.disabled || this._element.classList.contains(ClassName.DISABLED) || !this._menu.classList.contains(ClassName.SHOW)) { if (this._element.disabled || this._element.classList.contains(ClassName.DISABLED) || !this._menu.classList.contains(ClassName.SHOW)) {
return return
@ -237,6 +225,10 @@ class Dropdown {
return return
} }
if (this._popper) {
this._popper.destroy()
}
Manipulator.toggleClass(this._menu, ClassName.SHOW) Manipulator.toggleClass(this._menu, ClassName.SHOW)
Manipulator.toggleClass(parent, ClassName.SHOW) Manipulator.toggleClass(parent, ClassName.SHOW)
EventHandler.trigger(parent, Event.HIDDEN, relatedTarget) EventHandler.trigger(parent, Event.HIDDEN, relatedTarget)

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

@ -174,7 +174,6 @@ describe('Dropdown', () => {
expect(firstDropdownEl.classList.contains('show')).toEqual(true) expect(firstDropdownEl.classList.contains('show')).toEqual(true)
spyOn(dropdown1._popper, 'destroy') spyOn(dropdown1._popper, 'destroy')
dropdown2.toggle() dropdown2.toggle()
done()
}) })
secondDropdownEl.addEventListener('shown.bs.dropdown', () => { secondDropdownEl.addEventListener('shown.bs.dropdown', () => {
@ -679,6 +678,33 @@ describe('Dropdown', () => {
dropdown.hide() dropdown.hide()
}) })
it('should hide a dropdown and destroy popper', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
dropdownEl.addEventListener('shown.bs.dropdown', () => {
spyOn(dropdown._popper, 'destroy')
dropdown.hide()
})
dropdownEl.addEventListener('hidden.bs.dropdown', () => {
expect(dropdown._popper.destroy).toHaveBeenCalled()
done()
})
dropdown.show()
})
it('should not hide a dropdown if the element is disabled', done => { it('should not hide a dropdown if the element is disabled', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<div class="dropdown">', '<div class="dropdown">',