kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Fix dropdown keys to open menu (#32750)

Browse source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Siju Samson 2021-02-04 01:33:21 +05:30 committed by GitHub
parent 2a9d72133d
commit b376a3d80d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
js/src/dropdown.js
View file

@ -468,6 +468,12 @@ class Dropdown extends BaseComponent {
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) {
Dropdown.clearMenus()
return

48
js/tests/unit/dropdown.spec.js
View file

@ -1626,4 +1626,52 @@ describe('Dropdown', () => {
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)
})
})