]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
feat(dropdown): add original click event
authorjakubhonisek <36561997+jakubhonisek@users.noreply.github.com>
Mon, 25 Jun 2018 13:29:34 +0000 (15:29 +0200)
committerJohann-S <johann.servoire@gmail.com>
Mon, 25 Jun 2018 13:29:34 +0000 (15:29 +0200)
docs/4.1/components/dropdowns.md
js/src/dropdown.js
js/tests/unit/dropdown.js

index 7b2be36fe46df0fb841de5021ef2e9a59d24990c..9adfa499bc33ae19db611630b870e7e16dcc5bf6 100644 (file)
@@ -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 |
 | --- | --- |
index 5494fdb64a622c729b2bab309a9aa879f14ad358..c7dcdec7c98bcad18acfd39192aad70a92d63c5d 100644 (file)
@@ -344,6 +344,10 @@ const Dropdown = (($) => {
           relatedTarget: toggles[i]
         }
 
+        if (event && event.type === 'click') {
+          relatedTarget.clickEvent = event
+        }
+
         if (!context) {
           continue
         }
index f767124d59baca16bfd7bb04121b6f82503e2c37..81d35ff3a74928ff7fab4e4f4769ace210b4fe01 100644 (file)
@@ -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()