rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-06 23:57:36 +02:00
Code Issues Actions 11 Packages Releases Activity

Fix skip element disabled via attribute when using keyboard navigation

Browse Source
This commit is contained in:
vsn4ik 2018-01-23 02:03:00 +03:00 committed by Johann-S
parent 2cd700313d
commit 68db42c9f8
2 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/dropdown.js
View File

@ -57,7 +57,7 @@ const Dropdown = (($) => {
FORM_CHILD : '.dropdown form', FORM_CHILD : '.dropdown form',
MENU : '.dropdown-menu', MENU : '.dropdown-menu',
NAVBAR_NAV : '.navbar-nav', NAVBAR_NAV : '.navbar-nav',
VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)' VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
} }
const AttachmentMap = { const AttachmentMap = {

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

@ -544,39 +544,6 @@ $(function () {
$dropdown.trigger('click') $dropdown.trigger('click')
}) })
QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
assert.expect(2)
var done = assert.async()
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 disabled" href="#">Disabled link</a>' +
'<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('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired')
$dropdown.trigger($.Event('keydown', {
which: 40
}))
$dropdown.trigger($.Event('keydown', {
which: 40
}))
assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) { QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
assert.expect(4) assert.expect(4)
var done = assert.async() var done = assert.async()
@ -617,6 +584,41 @@ $(function () {
$dropdown.trigger('click') $dropdown.trigger('click')
}) })
QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
assert.expect(3)
var done = assert.async()
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 disabled" href="#">Disabled link</a>' +
'<button class="dropdown-item" type="button" disabled>Disabled button</button>' +
'<a id="item1" 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('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired')
$dropdown.trigger($.Event('keydown', {
which: 40
}))
assert.ok($(document.activeElement).is($('#item1')), '#item1 is focused')
$dropdown.trigger($.Event('keydown', {
which: 40
}))
assert.ok($(document.activeElement).is($('#item1')), '#item1 is still focused')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) { QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()