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

Fixes #16828
Closes #16865

1 files changed, 32 insertions, 0 deletions

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()