mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-10 15:44:51 +02:00
Code Issues Releases Wiki Activity

Automatically select an item in the dropdown when using arrow keys (#34052)

Browse Source
This commit is contained in:
alpadev
2021-05-22 09:58:52 +02:00
committed by GitHub
parent 8033975548
commit b39b665072
5 changed files with 61 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
js/tests/unit/dropdown.spec.js
View File

@@ -1561,7 +1561,7 @@ describe('Dropdown', () => {
triggerDropdown.click()
})
it('should focus on the first element when using ArrowUp for the first time', done => {
it('should open the dropdown and focus on the last item when using ArrowUp for the first time', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -1573,19 +1573,44 @@ describe('Dropdown', () => {
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const item1 = fixtureEl.querySelector('#item1')
const lastItem = fixtureEl.querySelector('#item2')
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
const keydown = createEvent('keydown')
keydown.key = 'ArrowUp'
document.activeElement.dispatchEvent(keydown)
expect(document.activeElement).toEqual(item1, 'item1 is focused')
done()
setTimeout(() => {
expect(document.activeElement).toEqual(lastItem, 'item2 is focused')
done()
})
})
triggerDropdown.click()
const keydown = createEvent('keydown')
keydown.key = 'ArrowUp'
triggerDropdown.dispatchEvent(keydown)
})
it('should open the dropdown and focus on the first item when using ArrowDown for the first time', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a id="item1" class="dropdown-item" href="#">A link</a>',
' <a id="item2" class="dropdown-item" href="#">Another link</a>',
' </div>',
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const firstItem = fixtureEl.querySelector('#item1')
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
setTimeout(() => {
expect(document.activeElement).toEqual(firstItem, 'item1 is focused')
done()
})
})
const keydown = createEvent('keydown')
keydown.key = 'ArrowDown'
triggerDropdown.dispatchEvent(keydown)
})
it('should not close the dropdown if the user clicks on a text field within dropdown-menu', done => {