0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

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

This commit is contained in:
GeoSot 2021-12-09 15:34:17 +02:00 committed by GitHub
parent 4fd5539c75
commit c376cb0763
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 0 deletions

View File

@ -434,6 +434,7 @@ class Dropdown extends BaseComponent {
if (isEscapeEvent) {
instance.hide()
getToggleButton.focus()
return
}

View File

@ -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">',