From c376cb07630f49ae2bbb464925afb3a2dbc5565e Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 9 Dec 2021 15:34:17 +0200 Subject: [PATCH] Dropdown: fix toggle focus after dropdown is hidden using the `ESC` button (#35500) --- js/src/dropdown.js | 1 + js/tests/unit/dropdown.spec.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+) 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 = [ + '' + ].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 = [ '