Resolves keyboard scrolling issue references on issue #2

package.json

@@ -17,7 +17,7 @@
     "start": "node devServer.js",
     "test": "npm run lint && npm run test:unit",
     "test:unit": "NODE_ENV=dev karma start",
-    "watch": "watch 'clear && npm run lint -s && npm run test -s' source test"
+    "watch": "watch 'clear && npm run lint -s && npm run test -s' source"
   },
   "repository": {
     "type": "git",

source/VirtualScroll/VIrtualScroll.js

@@ -43,6 +43,7 @@ export default class VirtualScroll extends Component {
       scrollTop: 0
     }
 
+    this._onKeyPress = this._onKeyPress.bind(this)
     this._onScroll = this._onScroll.bind(this)
     this._onWheel = this._onWheel.bind(this)
   }
@@ -170,10 +171,13 @@ export default class VirtualScroll extends Component {
       <div
         ref='scrollingContainer'
         className={cn('VirtualScroll', className)}
+        onKeyDown={this._onKeyPress}
         onScroll={this._onScroll}
         onWheel={this._onWheel}
+        tabIndex={0}
         style={{
           height: height,
+          outline: 0,
           overflow: 'auto'
         }}
       >
@@ -258,6 +262,11 @@ export default class VirtualScroll extends Component {
     })
   }
 
+  _stopEvent (event) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
   /**
    * Sets an :isScrolling flag for a small window of time.
    * This flag is used to disable pointer events on the scrollable portion of the table (the rows).
@@ -302,6 +311,30 @@ export default class VirtualScroll extends Component {
     }
   }
 
+  _onKeyPress (event) {
+    const { rowHeight } = this.props
+    const { scrollTop } = this.state
+
+    switch (event.key) {
+      case 'ArrowDown':
+        this._stopEvent(event) // Prevent key from also scrolling surrounding window
+
+        const { height, rowsCount } = this.props
+        const totalRowsHeight = rowsCount * rowHeight
+        const newScrollTop = Math.min(totalRowsHeight - height, scrollTop + rowHeight)
+
+        this.setState({ scrollTop: newScrollTop })
+        break
+      case 'ArrowUp':
+        this._stopEvent(event) // Prevent key from also scrolling surrounding window
+
+        this.setState({
+          scrollTop: Math.max(0, scrollTop - rowHeight)
+        })
+        break
+    }
+  }
+
   _onScroll (event) {
     // In certain edge-cases React dispatches an onScroll event with an invalid target.scrollTop.
     // This invalid event can be detected by comparing event.target to this component's scrollable DOM element.