0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

feat(dropdown): add original click event

This commit is contained in:
jakubhonisek 2018-06-25 15:29:34 +02:00 committed by Johann-S
parent bca4ceacc7
commit 49e094619b
3 changed files with 73 additions and 0 deletions

View File

@ -845,6 +845,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style
### Events ### 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. 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 | | Event | Description |
| --- | --- | | --- | --- |

View File

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

View File

@ -499,6 +499,74 @@ $(function () {
$dropdown.trigger('click') $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) { QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
assert.expect(3) assert.expect(3)
var done = assert.async() var done = assert.async()