Fix triggering of {shown,hidden}.bs.dropdown events so relatedTarget gets set properly

Fixes #16828
Closes #16865

diff --git a/js/dropdown.js b/js/dropdown.js
index bc4d37343437dcdd6b0b69022fb40d56f68a5f57..612e92a250d914fdc0cd37883878984085d3928c 100644 (file)
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -51,7 +51,7 @@
       if (e.isDefaultPrevented()) return
 
       $this.attr('aria-expanded', 'false')
-      $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
+      $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
     })
   }
 
@@ -85,7 +85,7 @@
 
       $parent
         .toggleClass('open')
-        .trigger('shown.bs.dropdown', relatedTarget)
+        .trigger($.Event('shown.bs.dropdown', relatedTarget))
     }
 
     return false

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index a55684d52064d90a2883108742858748e4fa69bd..566b50ee7e124236ad5ce1c176d36f17ba1766e7 100644 (file)
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -286,6 +286,38 @@ $(function () {
     $(document.body).trigger('click')
   })
 
+  QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) {
+    assert.expect(2)
+    var dropdownHTML = '<ul class="tabs">'
+        + '<li class="dropdown">'
+        + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+        + '<ul class="dropdown-menu">'
+        + '<li><a href="#">Secondary link</a></li>'
+        + '<li><a href="#">Something else here</a></li>'
+        + '<li class="divider"/>'
+        + '<li><a href="#">Another link</a></li>'
+        + '</ul>'
+        + '</li>'
+        + '</ul>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+    var done = assert.async()
+
+    $dropdown.parent('.dropdown')
+      .on('hidden.bs.dropdown', function (e) {
+        assert.strictEqual(e.relatedTarget, $dropdown[0])
+        done()
+      })
+      .on('shown.bs.dropdown', function (e) {
+        assert.strictEqual(e.relatedTarget, $dropdown[0])
+        $(document.body).trigger('click')
+      })
+
+    $dropdown.trigger('click')
+  })
+
   QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
     assert.expect(3)
     var done = assert.async()