diff options
author | vsn4ik <vsn4ik@gmail.com> | 2018-01-23 02:03:00 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2018-03-26 10:37:25 +0300 |
commit | 68db42c9f86fcdfcca0cc049cbde30d0d73df88a (patch) | |
tree | 86fc25f48836b1ba41ebbfade9802e3196cd5ebe /js | |
parent | 2cd700313ddea235086e8fa2c93ce9f9e40cdd40 (diff) |
Fix skip element disabled via attribute when using keyboard navigation
Diffstat (limited to 'js')
-rw-r--r-- | js/src/dropdown.js | 2 | ||||
-rw-r--r-- | js/tests/unit/dropdown.js | 40 |
2 files changed, 22 insertions, 20 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 2f69298540..64d6b37176 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -57,7 +57,7 @@ const Dropdown = (($) => { FORM_CHILD : '.dropdown form', MENU : '.dropdown-menu', NAVBAR_NAV : '.navbar-nav', - VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)' + VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)' } const AttachmentMap = { diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index 3040e81b41..0e3d370413 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -544,15 +544,15 @@ $(function () { $dropdown.trigger('click') }) - QUnit.test('should skip disabled element when using keyboard navigation', function (assert) { - assert.expect(2) + QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) { + assert.expect(4) 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>' + + '<a id="item1" class="dropdown-item" href="#">A link</a>' + + '<a id="item2" class="dropdown-item" href="#">Another link</a>' + '</div>' + '</div>' + '</div>' @@ -568,24 +568,32 @@ $(function () { $dropdown.trigger($.Event('keydown', { which: 40 })) - $dropdown.trigger($.Event('keydown', { + assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused') + + $(document.activeElement).trigger($.Event('keydown', { which: 40 })) - assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused') + assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused') + + $(document.activeElement).trigger($.Event('keydown', { + which: 38 + })) + assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused') done() }) $dropdown.trigger('click') }) - QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) { - assert.expect(4) + 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 id="item1" class="dropdown-item" href="#">A link</a>' + - '<a id="item2" class="dropdown-item" href="#">Another link</a>' + + '<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>' @@ -601,17 +609,11 @@ $(function () { $dropdown.trigger($.Event('keydown', { which: 40 })) - assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused') - - $(document.activeElement).trigger($.Event('keydown', { + assert.ok($(document.activeElement).is($('#item1')), '#item1 is focused') + $dropdown.trigger($.Event('keydown', { which: 40 })) - assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused') - - $(document.activeElement).trigger($.Event('keydown', { - which: 38 - })) - assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused') + assert.ok($(document.activeElement).is($('#item1')), '#item1 is still focused') done() }) $dropdown.trigger('click') |