mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-15 15:29:22 +01:00
Fix dropdown keys to open menu (#32750)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
parent
2a9d72133d
commit
b376a3d80d
@ -468,6 +468,12 @@ class Dropdown extends BaseComponent {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
|
||||||
|
const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
|
||||||
|
button.click()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (!isActive || event.key === SPACE_KEY) {
|
if (!isActive || event.key === SPACE_KEY) {
|
||||||
Dropdown.clearMenus()
|
Dropdown.clearMenus()
|
||||||
return
|
return
|
||||||
|
@ -1626,4 +1626,52 @@ describe('Dropdown', () => {
|
|||||||
expect(Dropdown.getInstance(div)).toEqual(null)
|
expect(Dropdown.getInstance(div)).toEqual(null)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should open dropdown when pressing keydown or keyup', 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 disabled" href="#sub1">Submenu 1</a>',
|
||||||
|
' <button class="dropdown-item" type="button" disabled>Disabled button</button>',
|
||||||
|
' <a id="item1" class="dropdown-item" href="#">Another link</a>',
|
||||||
|
' </div>',
|
||||||
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
|
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
|
||||||
|
const dropdown = fixtureEl.querySelector('.dropdown')
|
||||||
|
|
||||||
|
const keydown = createEvent('keydown')
|
||||||
|
keydown.key = 'ArrowDown'
|
||||||
|
|
||||||
|
const keyup = createEvent('keyup')
|
||||||
|
keyup.key = 'ArrowUp'
|
||||||
|
|
||||||
|
const handleArrowDown = () => {
|
||||||
|
expect(triggerDropdown.classList.contains('show')).toEqual(true)
|
||||||
|
expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
|
||||||
|
setTimeout(() => {
|
||||||
|
dropdown.hide()
|
||||||
|
keydown.key = 'ArrowUp'
|
||||||
|
triggerDropdown.dispatchEvent(keyup)
|
||||||
|
}, 20)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleArrowUp = () => {
|
||||||
|
expect(triggerDropdown.classList.contains('show')).toEqual(true)
|
||||||
|
expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
|
||||||
|
done()
|
||||||
|
}
|
||||||
|
|
||||||
|
dropdown.addEventListener('shown.bs.dropdown', event => {
|
||||||
|
if (event.target.key === 'ArrowDown') {
|
||||||
|
handleArrowDown()
|
||||||
|
} else {
|
||||||
|
handleArrowUp()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
triggerDropdown.dispatchEvent(keydown)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
Loading…
x
Reference in New Issue
Block a user