Fix crash when pressing ArrowUp the first time

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">',