mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-22 06:39:52 +00:00
Dropdown: fix toggle focus after dropdown is hidden using the ESC
button (#35500)
This commit is contained in:
parent
4fd5539c75
commit
c376cb0763
@ -434,6 +434,7 @@ class Dropdown extends BaseComponent {
|
|||||||
|
|
||||||
if (isEscapeEvent) {
|
if (isEscapeEvent) {
|
||||||
instance.hide()
|
instance.hide()
|
||||||
|
getToggleButton.focus()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1790,6 +1790,34 @@ describe('Dropdown', () => {
|
|||||||
toggle.dispatchEvent(keyupEscape)
|
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 => {
|
it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', done => {
|
||||||
fixtureEl.innerHTML = [
|
fixtureEl.innerHTML = [
|
||||||
'<div class="dropdown">',
|
'<div class="dropdown">',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user