Fix crash when pressing ArrowUp the first time
This commit is contained in:
parent
d7f0f1aac9
commit
7787f642b9
|
@ -479,7 +479,7 @@ class Dropdown {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
let index = items.indexOf(event.target) || 0
|
let index = items.indexOf(event.target)
|
||||||
|
|
||||||
if (event.key === ARROW_UP_KEY && index > 0) { // Up
|
if (event.key === ARROW_UP_KEY && index > 0) { // Up
|
||||||
index--
|
index--
|
||||||
|
@ -489,6 +489,9 @@ class Dropdown {
|
||||||
index++
|
index++
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// index is -1 if the first keydown is an ArrowUp
|
||||||
|
index = index === -1 ? 0 : index
|
||||||
|
|
||||||
items[index].focus()
|
items[index].focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1367,6 +1367,34 @@ describe('Dropdown', () => {
|
||||||
triggerDropdown.click()
|
triggerDropdown.click()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should focus on the first element when using ArrowUp for the first time', done => {
|
||||||
|
fixtureEl.innerHTML = [
|
||||||
|
'<div class="dropdown">',
|
||||||
|
' <button class="btn dropdown-toggle" data-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-toggle="dropdown"]')
|
||||||
|
const dropdown = fixtureEl.querySelector('.dropdown')
|
||||||
|
const item1 = fixtureEl.querySelector('#item1')
|
||||||
|
|
||||||
|
dropdown.addEventListener('shown.bs.dropdown', () => {
|
||||||
|
const keydown = createEvent('keydown')
|
||||||
|
keydown.key = 'ArrowUp'
|
||||||
|
|
||||||
|
document.activeElement.dispatchEvent(keydown)
|
||||||
|
expect(document.activeElement).toEqual(item1, 'item1 is focused')
|
||||||
|
|
||||||
|
done()
|
||||||
|
})
|
||||||
|
|
||||||
|
triggerDropdown.click()
|
||||||
|
})
|
||||||
|
|
||||||
it('should not close the dropdown if the user clicks on a text field', done => {
|
it('should not close the dropdown if the user clicks on a text field', done => {
|
||||||
fixtureEl.innerHTML = [
|
fixtureEl.innerHTML = [
|
||||||
'<div class="dropdown">',
|
'<div class="dropdown">',
|
||||||
|
|
Loading…
Reference in New Issue