Backport #29298

dropdown show method should do the same as toggle

bundlesize.config.json

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

js/src/dropdown.js

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

js/tests/unit/dropdown.js

@@ -1272,7 +1272,7 @@ $(function () {
   })
 
   QUnit.test('should show dropdown', function (assert) {
-    assert.expect(2)
+    assert.expect(3)
 
     var dropdownHTML =
       '<div class="dropdown">' +
@@ -1293,6 +1293,7 @@ $(function () {
     $dropdown
       .parent('.dropdown')
       .on('show.bs.dropdown', function () {
+        assert.ok(dropdown._popper === null)
         assert.ok(true, 'show was fired')
       })
       .on('shown.bs.dropdown', function () {
@@ -1550,4 +1551,38 @@ $(function () {
 
     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)
+  })
 })