rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fix event propagation from inactive and disabled dropdowns (#30510) (#30511)

Browse Source
This commit is contained in:
luktom 2020-04-07 20:16:17 +02:00 committed by GitHub
parent 1b575c27cd
commit 8cc9defbc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/dropdown.js
View File

@ -452,9 +452,6 @@ class Dropdown {
return
}
event.preventDefault()
event.stopPropagation()
if (this.disabled || $(this).hasClass(CLASS_NAME_DISABLED)) {
return
}
@ -466,6 +463,9 @@ class Dropdown {
return
}
event.preventDefault()
event.stopPropagation()
if (!isActive || isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) {
if (event.which === ESCAPE_KEYCODE) {
const toggle = parent.querySelector(SELECTOR_DATA_TOGGLE)

64
js/tests/unit/dropdown.js
View File

@ -1020,6 +1020,70 @@ $(function () {
$textarea.trigger('click')
})
QUnit.test('should not stop key event propagation when dropdown is disabled', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '<div class="tabs">' +
'<div class="dropdown">' +
'<a href="#" class="dropdown-toggle" id="toggle" data-toggle="dropdown" disabled>Dropdown</a>' +
'<div class="dropdown-menu">' +
'<a class="dropdown-item" id="item" href="#">Menu item</a>' +
'</div>' +
'</div>'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var $body = $('body')
$(document).on('keydown', function () {
$body.addClass('event-handled')
})
// Key escape
$dropdown.trigger('focus').trigger($.Event('keydown', {
which: 27
}))
assert.ok($body.hasClass('event-handled'), 'ESC key event was propagated')
done()
})
QUnit.test('should not stop ESC key event propagation when dropdown is not active', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '<div class="tabs">' +
'<div class="dropdown">' +
'<a href="#" class="dropdown-toggle" id="toggle" data-toggle="dropdown">Dropdown</a>' +
'<div class="dropdown-menu">' +
'<a class="dropdown-item" id="item" href="#">Menu item</a>' +
'</div>' +
'</div>'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var $body = $('body')
$(document).on('keydown', function () {
$body.addClass('event-handled')
})
// Key escape
$dropdown.trigger('focus').trigger($.Event('keydown', {
which: 27
}))
assert.ok($body.hasClass('event-handled'), 'ESC key event was propagated')
done()
})
QUnit.test('should not use Popper.js if display set to static', function (assert) {
assert.expect(1)
var dropdownHTML =