diff options
author | GeoSot <geo.sotis@gmail.com> | 2021-12-09 16:34:17 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-12-09 16:34:17 +0300 |
commit | c376cb07630f49ae2bbb464925afb3a2dbc5565e (patch) | |
tree | 2a45170801ee35be0ed9350980def97e19b35626 /js | |
parent | 4fd5539c75515527cb1335c31bbaf76209aab296 (diff) |
Dropdown: fix toggle focus after dropdown is hidden using the `ESC` button (#35500)
Diffstat (limited to 'js')
-rw-r--r-- | js/src/dropdown.js | 1 | ||||
-rw-r--r-- | js/tests/unit/dropdown.spec.js | 28 |
2 files changed, 29 insertions, 0 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 6fa3ea37a6..c4e7baf295 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -434,6 +434,7 @@ class Dropdown extends BaseComponent { if (isEscapeEvent) { instance.hide() + getToggleButton.focus() return } diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 037a6a5a93..91e783a233 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1790,6 +1790,34 @@ describe('Dropdown', () => { toggle.dispatchEvent(keyupEscape) }) + it('should close dropdown using `escape` button, and return focus to its trigger', done => { + fixtureEl.innerHTML = [ + '<div class="dropdown">', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', + ' <div class="dropdown-menu">', + ' <a class="dropdown-item" href="#">Some Item</a>', + ' </div>', + '</div>' + ].join('') + + const toggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') + + toggle.addEventListener('shown.bs.dropdown', () => { + const keydownEvent = createEvent('keydown', { bubbles: true }) + keydownEvent.key = 'ArrowDown' + toggle.dispatchEvent(keydownEvent) + keydownEvent.key = 'Escape' + toggle.dispatchEvent(keydownEvent) + }) + + toggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => { + expect(document.activeElement).toEqual(toggle) + done() + })) + + toggle.click() + }) + it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', |