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

Backport #29298

Browse Source 
dropdown show method should do the same as toggle
This commit is contained in:
Johann-S 2019-08-25 18:12:02 +02:00 committed by XhmikosR
parent dd181e91bd
commit ef1c7aadbc
3 changed files with 51 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bundlesize.config.json
View File

@ -26,7 +26,7 @@
}, },
{ {
"path": "./dist/js/bootstrap.bundle.js", "path": "./dist/js/bootstrap.bundle.js",
"maxSize": "47 kB" "maxSize": "47.50 kB"
}, },
{ {
"path": "./dist/js/bootstrap.bundle.min.js", "path": "./dist/js/bootstrap.bundle.min.js",

39
js/src/dropdown.js
View File

@ -126,7 +126,6 @@ class Dropdown {
return return
} }
const parent = Dropdown._getParentFromElement(this._element)
const isActive = $(this._menu).hasClass(ClassName.SHOW) const isActive = $(this._menu).hasClass(ClassName.SHOW)
Dropdown._clearMenus() Dropdown._clearMenus()
@ -135,10 +134,19 @@ class Dropdown {
return return
} }
this.show(true)
}
show(usePopper = false) {
if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED) || $(this._menu).hasClass(ClassName.SHOW)) {
return
}
const relatedTarget = { const relatedTarget = {
relatedTarget: this._element relatedTarget: this._element
} }
const showEvent = $.Event(Event.SHOW, relatedTarget) const showEvent = $.Event(Event.SHOW, relatedTarget)
const parent = Dropdown._getParentFromElement(this._element)
$(parent).trigger(showEvent) $(parent).trigger(showEvent)
@ -147,7 +155,7 @@ class Dropdown {
} }
// Disable totally Popper.js for Dropdown in Navbar // Disable totally Popper.js for Dropdown in Navbar
if (!this._inNavbar) { if (!this._inNavbar && usePopper) {
/** /**
* Check for Popper dependency * Check for Popper dependency
* Popper - https://popper.js.org * Popper - https://popper.js.org
@ -196,29 +204,6 @@ class Dropdown {
.trigger($.Event(Event.SHOWN, relatedTarget)) .trigger($.Event(Event.SHOWN, relatedTarget))
} }
show() {
if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED) || $(this._menu).hasClass(ClassName.SHOW)) {
return
}
const relatedTarget = {
relatedTarget: this._element
}
const showEvent = $.Event(Event.SHOW, relatedTarget)
const parent = Dropdown._getParentFromElement(this._element)
$(parent).trigger(showEvent)
if (showEvent.isDefaultPrevented()) {
return
}
$(this._menu).toggleClass(ClassName.SHOW)
$(parent)
.toggleClass(ClassName.SHOW)
.trigger($.Event(Event.SHOWN, relatedTarget))
}
hide() { hide() {
if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED) || !$(this._menu).hasClass(ClassName.SHOW)) { if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED) || !$(this._menu).hasClass(ClassName.SHOW)) {
return return
@ -236,6 +221,10 @@ class Dropdown {
return return
} }
if (this._popper) {
this._popper.destroy()
}
$(this._menu).toggleClass(ClassName.SHOW) $(this._menu).toggleClass(ClassName.SHOW)
$(parent) $(parent)
.toggleClass(ClassName.SHOW) .toggleClass(ClassName.SHOW)

37
js/tests/unit/dropdown.js
View File

@ -1272,7 +1272,7 @@ $(function () {
}) })
QUnit.test('should show dropdown', function (assert) { QUnit.test('should show dropdown', function (assert) {
assert.expect(2) assert.expect(3)
var dropdownHTML = var dropdownHTML =
'<div class="dropdown">' + '<div class="dropdown">' +
@ -1293,6 +1293,7 @@ $(function () {
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
.on('show.bs.dropdown', function () { .on('show.bs.dropdown', function () {
assert.ok(dropdown._popper === null)
assert.ok(true, 'show was fired') assert.ok(true, 'show was fired')
}) })
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
@ -1550,4 +1551,38 @@ $(function () {
dropdown1.toggle() dropdown1.toggle()
}) })
QUnit.test('should hide a dropdown and destroy popper', function (assert) {
assert.expect(1)
var done = assert.async()
var fixtureHtml = [
'<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('')
$(fixtureHtml).appendTo('#qunit-fixture')
var $dropdownEl = $('.dropdown')
var dropdown = $('[data-toggle="dropdown"]')
.bootstrapDropdown()
.data('bs.dropdown')
var spyPopper
$dropdownEl.one('shown.bs.dropdown', function () {
spyPopper = sinon.spy(dropdown._popper, 'destroy')
dropdown.hide()
})
$dropdownEl.one('hidden.bs.dropdown', function () {
assert.ok(spyPopper.called)
done()
})
dropdown.show(true)
})
}) })