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
Semantic-Org · Jun 15, 2017 · c15fc00 · c15fc00
1 parent 553facc
commit c15fc00
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git 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
@@ -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', () => {