From 355dfe438abc066dec8c3e642bab8cbf3b3a1d61 Mon Sep 17 00:00:00 2001
From: Stein Cato Blostrupmoen <esseb@esseb.com>
Date: Sun, 20 Mar 2016 15:31:44 +0100
Subject: [PATCH] Add support for changing the slider value using up and down
 also

Call event.preventDefault() to prevent unwanted scrolling.
---
 src/InputRange/InputRange.js |  6 +++
 test/InputRange.spec.js      | 78 ++++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)

diff --git a/src/InputRange/InputRange.js b/src/InputRange/InputRange.js
index e93909b..89b1a75 100644
--- a/src/InputRange/InputRange.js
+++ b/src/InputRange/InputRange.js
@@ -22,8 +22,10 @@ const internals = new WeakMap();
  * @const {Object.<string, number>}
  */
 const KeyCode = {
+  DOWN_ARROW: 40,
   LEFT_ARROW: 37,
   RIGHT_ARROW: 39,
+  UP_ARROW: 38,
 };
 
 /**
@@ -393,10 +395,14 @@ export default class InputRange extends React.Component {
 
     switch (event.keyCode) {
     case KeyCode.LEFT_ARROW:
+    case KeyCode.DOWN_ARROW:
+      event.preventDefault();
       this.decrementValue(key);
       break;
 
     case KeyCode.RIGHT_ARROW:
+    case KeyCode.UP_ARROW:
+      event.preventDefault();
       this.incrementValue(key);
       break;
 
diff --git a/test/InputRange.spec.js b/test/InputRange.spec.js
index c0f44e6..e4f0bc6 100644
--- a/test/InputRange.spec.js
+++ b/test/InputRange.spec.js
@@ -219,6 +219,7 @@ describe('InputRange', () => {
         slider = inputRange.refs.sliderMax;
         event = {
           keyCode: 37,
+          preventDefault: jasmine.createSpy('preventDefault'),
         };
       });
 
@@ -228,6 +229,44 @@ describe('InputRange', () => {
         expect(inputRange.decrementValue).toHaveBeenCalledWith('max');
       });
 
+      it('should call event.preventDefault()', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(event.preventDefault).toHaveBeenCalledWith();
+      });
+
+      it('should not decrement value if disabled', () => {
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+        spyOn(inputRange, 'decrementValue');
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(inputRange.decrementValue).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when pressing down arrow key', () => {
+      beforeEach(() => {
+        spyOn(inputRange, 'decrementValue');
+
+        slider = inputRange.refs.sliderMax;
+        event = {
+          keyCode: 40,
+          preventDefault: jasmine.createSpy('preventDefault'),
+        };
+      });
+
+      it('should decrement value', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(inputRange.decrementValue).toHaveBeenCalledWith('max');
+      });
+
+      it('should call event.preventDefault()', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(event.preventDefault).toHaveBeenCalledWith();
+      });
+
       it('should not decrement value if disabled', () => {
         inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
         spyOn(inputRange, 'decrementValue');
@@ -244,6 +283,7 @@ describe('InputRange', () => {
         slider = inputRange.refs.sliderMax;
         event = {
           keyCode: 39,
+          preventDefault: jasmine.createSpy('preventDefault'),
         };
       });
 
@@ -253,6 +293,44 @@ describe('InputRange', () => {
         expect(inputRange.incrementValue).toHaveBeenCalledWith('max');
       });
 
+      it('should call event.preventDefault()', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(event.preventDefault).toHaveBeenCalledWith();
+      });
+
+      it('should not increment value if disabled', () => {
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+        spyOn(inputRange, 'incrementValue');
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(inputRange.incrementValue).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when pressing up arrow key', () => {
+      beforeEach(() => {
+        spyOn(inputRange, 'incrementValue');
+
+        slider = inputRange.refs.sliderMax;
+        event = {
+          keyCode: 38,
+          preventDefault: jasmine.createSpy('preventDefault'),
+        };
+      });
+
+      it('should increment value', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(inputRange.incrementValue).toHaveBeenCalledWith('max');
+      });
+
+      it('should call event.preventDefault()', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(event.preventDefault).toHaveBeenCalledWith();
+      });
+
       it('should not increment value if disabled', () => {
         inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
         spyOn(inputRange, 'incrementValue');