Backport #29277

dropdown - destroy old popper.js references

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index c064c3461a1abe6f171679713835203e2ffdd9ac..f38712e476a3b6566cb6a9f266b6db7a735acb7e 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -436,6 +436,10 @@ class Dropdown {
 
       toggles[i].setAttribute('aria-expanded', 'false')
 
+      if (context._popper) {
+        context._popper.destroy()
+      }
+
       $(dropdownMenu).removeClass(ClassName.SHOW)
       $(parent)
         .removeClass(ClassName.SHOW)

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 85ebc0ed25795ced76dea1af6bdbacb9035390a4..07702e2f62d54057858d135b50de7bc711af767a 100644 (file)
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -799,7 +799,7 @@ $(function () {
       .parent('.dropdown')
       .on('shown.bs.dropdown', function () {
         // Forcibly focus first item
-        $item.focus()
+        $item[0].focus()
         assert.ok($(document.activeElement)[0] === $item[0], 'menu item initial focus set')
 
         // Key escape
@@ -1506,4 +1506,48 @@ $(function () {
 
     assert.strictEqual(popperConfig.placement, 'left')
   })
+
+  QUnit.test('should destroy old popper references on toggle', function (assert) {
+    assert.expect(3)
+    var done = assert.async()
+
+    var fixtureHtml = [
+      '<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('')
+
+    $(fixtureHtml).appendTo('#qunit-fixture')
+
+    var $btnDropdown1 = $('.firstBtn').bootstrapDropdown()
+    var $btnDropdown2 = $('.secondBtn').bootstrapDropdown()
+    var $firstDropdownEl = $('.first')
+    var $secondDropdownEl = $('.second')
+    var dropdown1 = $btnDropdown1.data('bs.dropdown')
+    var dropdown2 = $btnDropdown2.data('bs.dropdown')
+    var spyPopper
+
+    $firstDropdownEl.one('shown.bs.dropdown', function () {
+      assert.strictEqual($firstDropdownEl.hasClass('show'), true)
+      spyPopper = sinon.spy(dropdown1._popper, 'destroy')
+      dropdown2.toggle()
+    })
+
+    $secondDropdownEl.one('shown.bs.dropdown', function () {
+      assert.strictEqual($secondDropdownEl.hasClass('show'), true)
+      assert.ok(spyPopper.called)
+      done()
+    })
+
+    dropdown1.toggle()
+  })
 })