diff options
author | Tanguy Krotoff <tkrotoff@gmail.com> | 2020-04-15 18:59:31 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-04-17 18:22:15 +0300 |
commit | 7787f642b9abef8c079bb4594ac122731cbe18f8 (patch) | |
tree | 5505f2f06eab8268a403159268815400f29d67ea /js | |
parent | d7f0f1aac92e70ca2324c64163d021c8f12ef948 (diff) |
Fix crash when pressing ArrowUp the first time
Diffstat (limited to 'js')
-rw-r--r-- | js/src/dropdown.js | 5 | ||||
-rw-r--r-- | js/tests/unit/dropdown.spec.js | 28 |
2 files changed, 32 insertions, 1 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index b1aa6d8496..2fe707f152 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -479,7 +479,7 @@ class Dropdown { return } - let index = items.indexOf(event.target) || 0 + let index = items.indexOf(event.target) if (event.key === ARROW_UP_KEY && index > 0) { // Up index-- @@ -489,6 +489,9 @@ class Dropdown { index++ } + // index is -1 if the first keydown is an ArrowUp + index = index === -1 ? 0 : index + items[index].focus() } diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index b2820f72e0..4f5639db8f 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1367,6 +1367,34 @@ describe('Dropdown', () => { 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 => { fixtureEl.innerHTML = [ '<div class="dropdown">', |