diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 85899d6fcd..18b051b894 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -62,11 +62,6 @@ const Dropdown = (($) => { const Selector = { DATA_TOGGLE : '[data-toggle="dropdown"]', FORM_CHILD : '.dropdown form', -<<<<<<< HEAD -======= - ROLE_MENU : '[role="menu"]', - ROLE_LISTBOX : '[role="listbox"]', ->>>>>>> Dropdown handle keydown on input and textarea MENU : '.dropdown-menu', NAVBAR_NAV : '.navbar-nav', VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)' @@ -366,7 +361,7 @@ const Dropdown = (($) => { // - And not a key in REGEXP_KEYDOWN => not a dropdown command // If input/textarea: // - If space key => not a dropdown command - // - If key is other than excape + // - If key is other than escape // - If key is not up or down => not a dropdown command // - If trigger inside the menu => not a dropdown command if (/input|textarea/i.test(event.target.tagName) ? @@ -432,7 +427,6 @@ const Dropdown = (($) => { $(document) .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) -<<<<<<< HEAD .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler) .on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus) .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { @@ -440,13 +434,6 @@ const Dropdown = (($) => { event.stopPropagation() Dropdown._jQueryInterface.call($(this), 'toggle') }) -======= - .on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler) - .on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler) - .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler) - .on(`${Event.CLICK_DATA_API} ${Event.FOCUSIN_DATA_API}`, Dropdown._clearMenus) - .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle) ->>>>>>> Dropdown handle keydown on input and textarea .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => { e.stopPropagation() }) diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index d401db0b5e..c1202266b1 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -457,8 +457,8 @@ $(function () { $dropdown.trigger('click') }) - QUnit.test('should ignore keyboard events for s and ' - + '' - + '' - + '' - var $dropdown = $(dropdownHTML) - .appendTo('#qunit-fixture') - .find('[data-toggle="dropdown"]') - .bootstrapDropdown() - - var $textarea = $('#textarea') - - $dropdown - .parent('.dropdown') - .one('shown.bs.dropdown', function () { - assert.ok(true, 'shown was fired') - - // Key space - $textarea.trigger('focus').trigger($.Event('keydown', { which: 32 })) - assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') - assert.ok($(document.activeElement).is($textarea), 'textarea is still focused') - - // Key escape - $textarea.trigger('focus').trigger($.Event('keydown', { which: 27 })) - assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') - - $dropdown - .parent('.dropdown') - .one('shown.bs.dropdown', function () { - - // Key down - $textarea.trigger('focus').trigger($.Event('keydown', { which: 40 })) - assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') - - $dropdown - .parent('.dropdown') - .one('shown.bs.dropdown', function () { - - // Key up - $textarea.trigger('focus').trigger($.Event('keydown', { which: 38 })) - assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') - done() - }).bootstrapDropdown('toggle') - $textarea.trigger('click') - }) - $textarea.trigger('click') - }) - $textarea.trigger('click') - }) - QUnit.test('should skip disabled element when using keyboard navigation', function (assert) { assert.expect(2) var done = assert.async() @@ -785,4 +649,183 @@ $(function () { }) $triggerDropdown.trigger($.Event('click')) }) + + QUnit.test('should ignore keyboard events for s and ' + + ' ' + + ' ' + + '' + + var $dropdown = $(dropdownHTML) + .appendTo('#qunit-fixture') + .find('[data-toggle="dropdown"]') + .bootstrapDropdown() + + var $textarea = $('#textarea') + + $dropdown + .parent('.dropdown') + .one('shown.bs.dropdown', function () { + assert.ok(true, 'shown was fired') + + // Key space + $textarea.trigger('focus').trigger($.Event('keydown', { which: 32 })) + assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') + assert.ok($(document.activeElement).is($textarea), 'textarea is still focused') + + // Key escape + $textarea.trigger('focus').trigger($.Event('keydown', { which: 27 })) + assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') + + $dropdown + .parent('.dropdown') + .one('shown.bs.dropdown', function () { + + // Key down + $textarea.trigger('focus').trigger($.Event('keydown', { which: 40 })) + assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') + + $dropdown + .parent('.dropdown') + .one('shown.bs.dropdown', function () { + + // Key up + $textarea.trigger('focus').trigger($.Event('keydown', { which: 38 })) + assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') + done() + }).bootstrapDropdown('toggle') + $textarea.trigger('click') + }) + $textarea.trigger('click') + }) + $textarea.trigger('click') + }) })