Skip to content

Commit c376cb0

Browse files
authored
Dropdown: fix toggle focus after dropdown is hidden using the ESC button (#35500)
1 parent 4fd5539 commit c376cb0

File tree

2 files changed

+29
-0
lines changed

2 files changed

+29
-0
lines changed

js/src/dropdown.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,7 @@ class Dropdown extends BaseComponent {
434434

435435
if (isEscapeEvent) {
436436
instance.hide()
437+
getToggleButton.focus()
437438
return
438439
}
439440

js/tests/unit/dropdown.spec.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1790,6 +1790,34 @@ describe('Dropdown', () => {
17901790
toggle.dispatchEvent(keyupEscape)
17911791
})
17921792

1793+
it('should close dropdown using `escape` button, and return focus to its trigger', done => {
1794+
fixtureEl.innerHTML = [
1795+
'<div class="dropdown">',
1796+
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
1797+
' <div class="dropdown-menu">',
1798+
' <a class="dropdown-item" href="#">Some Item</a>',
1799+
' </div>',
1800+
'</div>'
1801+
].join('')
1802+
1803+
const toggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
1804+
1805+
toggle.addEventListener('shown.bs.dropdown', () => {
1806+
const keydownEvent = createEvent('keydown', { bubbles: true })
1807+
keydownEvent.key = 'ArrowDown'
1808+
toggle.dispatchEvent(keydownEvent)
1809+
keydownEvent.key = 'Escape'
1810+
toggle.dispatchEvent(keydownEvent)
1811+
})
1812+
1813+
toggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
1814+
expect(document.activeElement).toEqual(toggle)
1815+
done()
1816+
}))
1817+
1818+
toggle.click()
1819+
})
1820+
17931821
it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', done => {
17941822
fixtureEl.innerHTML = [
17951823
'<div class="dropdown">',

0 commit comments

Comments
 (0)