Allow selection of result using keyboard

1 files changed, 19 insertions, 1 deletions

diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx
index 7e33e84..50917dd 100644
--- a/src/client/react/components/container/Search.jsx
+++ b/src/client/react/components/container/Search.jsx
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 
 import SearchIcon from 'react-icons/lib/md/search';
 
-import { inputChange } from '../../actions/search';
+import { inputChange, changeSelectedResult } from '../../actions/search';
 
 import Results from './Results';
 import IconFromUserType from '../presentational/IconFromUserType';
@@ -25,6 +25,7 @@ class Search extends React.Component {
 
     this.onFocus = this.onFocus.bind(this);
     this.onBlur = this.onBlur.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
   }
 
   onFocus() {
@@ -39,6 +40,22 @@ class Search extends React.Component {
     });
   }
 
+  onKeyDown(event) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      switch (event.key) {
+        case 'ArrowUp':
+          this.props.dispatch(changeSelectedResult(-1));
+          break;
+        case 'ArrowDown':
+          this.props.dispatch(changeSelectedResult(+1));
+          break;
+        default:
+          throw new Error('This should never happen... pls?');
+      }
+    }
+  }
+
   render() {
     const {
       value,
@@ -63,6 +80,7 @@ class Search extends React.Component {
           <input
             id="search__input"
             onChange={event => dispatch(inputChange(event.target.value))}
+            onKeyDown={this.onKeyDown}
             value={value}
             placeholder="Zoeken"
             onFocus={this.onFocus}