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:
parent
bca4ceacc7
commit
49e094619b
@ -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 |
|
||||
| --- | --- |
|
||||
|
@ -344,6 +344,10 @@ const Dropdown = (($) => {
|
||||
relatedTarget: toggles[i]
|
||||
}
|
||||
|
||||
if (event && event.type === 'click') {
|
||||
relatedTarget.clickEvent = event
|
||||
}
|
||||
|
||||
if (!context) {
|
||||
continue
|
||||
}
|
||||
|
@ -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()
|
||||
|
Loading…
x
Reference in New Issue
Block a user