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

Fixes #16828
Closes #16865

2 files changed, 34 insertions, 2 deletions

diff --git a/js/dropdown.js b/js/dropdown.js
index bc4d37343..612e92a25 100644
--- 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 a55684d52..566b50ee7 100644
--- 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()