From 6925570467560374c37231b66ed43aad06521e38 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 29 Jan 2018 19:48:56 +0100 Subject: [PATCH] Don't handle key events if slider is disabled --- components/slider/Slider.js | 17 ++++++++++++++--- components/slider/__tests__/index.spec.js | 11 +++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/components/slider/Slider.js b/components/slider/Slider.js index 01edef5c..7c21d4d5 100644 --- a/components/slider/Slider.js +++ b/components/slider/Slider.js @@ -10,6 +10,13 @@ import events from '../utils/events'; import InjectProgressBar from '../progress_bar/ProgressBar'; import InjectInput from '../input/Input'; +const KEYS = { + ENTER: 13, + ESC: 27, + ARROW_UP: 38, + ARROW_DOWN: 40, +}; + const factory = (ProgressBar, Input) => { class Slider extends Component { static propTypes = { @@ -148,9 +155,13 @@ const factory = (ProgressBar, Input) => { }; handleKeyDown = (event) => { - if ([13, 27].indexOf(event.keyCode) !== -1) this.getInput().blur(); - if (event.keyCode === 38) this.addToValue(this.props.step); - if (event.keyCode === 40) this.addToValue(-this.props.step); + const { disabled, step } = this.props; + const { ARROW_DOWN, ARROW_UP, ENTER, ESC } = KEYS; + + if (disabled) return; + if ([ENTER, ESC].includes(event.keyCode)) this.getInput().blur(); + if (event.keyCode === ARROW_UP) this.addToValue(step); + if (event.keyCode === ARROW_DOWN) this.addToValue(-step); }; handleMouseDown = (event) => { diff --git a/components/slider/__tests__/index.spec.js b/components/slider/__tests__/index.spec.js index 6a5c429e..c215c10a 100644 --- a/components/slider/__tests__/index.spec.js +++ b/components/slider/__tests__/index.spec.js @@ -63,6 +63,17 @@ describe('Slider', () => { }); }); + describe('#handleKeyDown', () => { + it('does not call addToValue if is disabled', () => { + const slider = shallow().instance(); + slider.addToValue = jest.fn(); + + slider.handleKeyDown({ keyCode: 40 }); + + expect(slider.addToValue).not.toHaveBeenCalled(); + }); + }); + describe('#render', () => { it('contains a linear progress bar with proper properties', () => { const wrapper = mount();