Dropdown: fix toggle focus after dropdown is hidden using the ESC b…

…utton (#35500)
twbs · Dec 9, 2021 · c376cb0 · c376cb0
1 parent 4fd5539
commit c376cb0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git 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
@@ -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">',