From c15fc00110e566f06fd8a91773951273baf244fc Mon Sep 17 00:00:00 2001
From: Brandon Ebersohl <brandon.ebersohl@gmail.com>
Date: Thu, 15 Jun 2017 01:01:13 -0500
Subject: [PATCH] fix(Dropdown): change active item on keyboard up/down (#1735)

* fix(Dropdown): change active item on keyboard up/down

* fix(Dropdown): change active item on keyboard up/down

* refactor(Dropdown): simplify move constant
---
 src/modules/Dropdown/Dropdown.js             | 25 ++++++++++----------
 test/specs/modules/Dropdown/Dropdown-test.js | 18 ++++++++++++++
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 39643637e1..10d565623b 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -514,20 +514,19 @@ export default class Dropdown extends Component {
   }
 
   moveSelectionOnKeyDown = (e) => {
-    debug('moveSelectionOnKeyDown()')
-    debug(keyboardKey.getName(e))
-    switch (keyboardKey.getCode(e)) {
-      case keyboardKey.ArrowDown:
-        e.preventDefault()
-        this.moveSelectionBy(1)
-        break
-      case keyboardKey.ArrowUp:
-        e.preventDefault()
-        this.moveSelectionBy(-1)
-        break
-      default:
-        break
+    debug('moveSelectionOnKeyDown()', keyboardKey.getName(e))
+
+    const { multiple } = this.props
+    const moves = {
+      [keyboardKey.ArrowDown]: 1,
+      [keyboardKey.ArrowUp]: -1,
     }
+    const move = moves[keyboardKey.getCode(e)]
+
+    if (move === undefined) return
+    e.preventDefault()
+    this.moveSelectionBy(move)
+    if (!multiple) this.makeSelectedItemActive(e)
   }
 
   openOnSpace = (e) => {
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 9a2730206c..8276cd88a1 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -789,6 +789,24 @@ describe('Dropdown', () => {
         .find('div.text')
         .should.contain.text(nextItem.text)
     })
+
+    it('updates value on down arrow', () => {
+      wrapperMount(<Dropdown options={options} selection />)
+
+      wrapper.simulate('click')
+      domEvent.keyDown(document, { key: 'ArrowDown' })
+
+      wrapper.should.have.state('value', options[1].value)
+    })
+
+    it('updates value on up arrow', () => {
+      wrapperMount(<Dropdown options={options} selection />)
+
+      wrapper.simulate('click')
+      domEvent.keyDown(document, { key: 'ArrowUp' })
+
+      wrapper.should.have.state('value', options[4].value)
+    })
   })
 
   describe('text', () => {