Dropdown: fix toggle focus after dropdown is hidden using the `ESC` button (#35500)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 6fa3ea37a6e50eab8010fdf1cc921ff73f664c6f..c4e7baf295bd0c44069211ab90e8f4200fd378b8 100644 (file)
--- 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 037a6a5a93c7e8e28a3422006247fe514806d799..91e783a23308137f829d74624c5e334fdeb019e5 100644 (file)
--- 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">',