feat(dropdown): add original click event

twbs · Jun 25, 2018 · 49e0946 · 49e0946
1 parent bca4cea
commit 49e0946
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 0 deletions.
diff --git a/docs/4.1/components/dropdowns.md b/docs/4.1/components/dropdowns.md
@@ -845,6 +845,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style
 ### Events
 
 All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
+`hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original event type is `click`) that contains an Event Object for the click event.
 
 | Event | Description |
 | --- | --- |

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -344,6 +344,10 @@ const Dropdown = (($) => {
           relatedTarget: toggles[i]
         }
 
+        if (event && event.type === 'click') {
+          relatedTarget.clickEvent = event
+        }
+
         if (!context) {
           continue
         }

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
@@ -499,6 +499,74 @@ $(function () {
     $dropdown.trigger('click')
   })
 
+  QUnit.test('should fire hide and hidden event with a clickEvent', function (assert) {
+    assert.expect(3)
+    var dropdownHTML = '<div class="tabs">' +
+        '<div class="dropdown">' +
+        '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+        '<div class="dropdown-menu">' +
+        '<a class="dropdown-item" href="#">Secondary link</a>' +
+        '<a class="dropdown-item" href="#">Something else here</a>' +
+        '<div class="divider"/>' +
+        '<a class="dropdown-item" href="#">Another link</a>' +
+        '</div>' +
+        '</div>' +
+        '</div>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+
+    $dropdown.parent('.dropdown')
+      .on('hide.bs.dropdown', function (e) {
+        assert.ok(e.clickEvent)
+      })
+      .on('hidden.bs.dropdown', function (e) {
+        assert.ok(e.clickEvent)
+      })
+      .on('shown.bs.dropdown', function () {
+        assert.ok(true, 'shown was fired')
+        $(document.body).trigger('click')
+      })
+
+    $dropdown.trigger('click')
+  })
+
+  QUnit.test('should fire hide and hidden event without a clickEvent if event type is not click', function (assert) {
+    assert.expect(3)
+    var dropdownHTML = '<div class="tabs">' +
+        '<div class="dropdown">' +
+        '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+        '<div class="dropdown-menu">' +
+        '<a class="dropdown-item" href="#">Secondary link</a>' +
+        '<a class="dropdown-item" href="#">Something else here</a>' +
+        '<div class="divider"/>' +
+        '<a class="dropdown-item" href="#">Another link</a>' +
+        '</div>' +
+        '</div>' +
+        '</div>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+
+    $dropdown.parent('.dropdown')
+      .on('hide.bs.dropdown', function (e) {
+        assert.notOk(e.clickEvent)
+      })
+      .on('hidden.bs.dropdown', function (e) {
+        assert.notOk(e.clickEvent)
+      })
+      .on('shown.bs.dropdown', function () {
+        assert.ok(true, 'shown was fired')
+        $dropdown.trigger($.Event('keydown', {
+          which: 27
+        }))
+      })
+
+    $dropdown.trigger('click')
+  })
+
   QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
     assert.expect(3)
     var done = assert.async()