Fix crash when pressing ArrowUp the first time

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index b1aa6d8496a78c9136b4dd2859f02e6c041d0ef3..2fe707f152c777d9473060db26b6dada694b9021 100644 (file)
--- 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 b2820f72e05e2355b4b51225a27a6490fce944d7..4f5639db8fec3d82f7ba0f01c81ffa83622c5f66 100644 (file)
--- 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">',