diff options
| -rw-r--r-- | docs/4.1/components/dropdowns.md | 1 | ||||
| -rw-r--r-- | js/src/dropdown.js | 4 | ||||
| -rw-r--r-- | js/tests/unit/dropdown.js | 68 |
3 files changed, 73 insertions, 0 deletions
diff --git a/docs/4.1/components/dropdowns.md b/docs/4.1/components/dropdowns.md index 7b2be36fe4..9adfa499bc 100644 --- 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 index 5494fdb64a..c7dcdec7c9 100644 --- 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 index f767124d59..81d35ff3a7 100644 --- 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() |