diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index 01edef5c..092e44de 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: 'Enter',
+ ESC: 'Escape',
+ ARROW_UP: 'ArrowUp',
+ ARROW_DOWN: 'ArrowDown',
+};
+
const factory = (ProgressBar, Input) => {
class Slider extends Component {
static propTypes = {
@@ -97,12 +104,6 @@ const factory = (ProgressBar, Input) => {
events.removeEventsFromDocument(this.getKeyboardEvents());
}
- getInput() {
- return this.inputNode && this.inputNode.getWrappedInstance
- ? this.inputNode.getWrappedInstance()
- : this.inputNode;
- }
-
getKeyboardEvents() {
return {
keydown: this.handleKeyDown,
@@ -148,13 +149,17 @@ 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.code)) this.inputNode.blur();
+ if (event.code === ARROW_UP) this.addToValue(step);
+ if (event.code === ARROW_DOWN) this.addToValue(-step);
};
handleMouseDown = (event) => {
- if (this.state.inputFocused) this.getInput().blur();
+ if (this.state.inputFocused) this.inputNode.blur();
events.addEventsToDocument(this.getMouseEventMap());
this.start(events.getMousePosition(event));
events.pauseEvent(event);
@@ -192,7 +197,7 @@ const factory = (ProgressBar, Input) => {
};
handleTouchStart = (event) => {
- if (this.state.inputFocused) this.getInput().blur();
+ if (this.state.inputFocused) this.inputNode.blur();
this.start(events.getTouchPosition(event));
events.addEventsToDocument(this.getTouchEventMap());
events.pauseEvent(event);
@@ -257,7 +262,7 @@ const factory = (ProgressBar, Input) => {
if (!this.props.editable) return undefined;
return (
{ this.inputNode = node; }}
+ innerRef={(node) => { this.inputNode = node; }}
className={this.props.theme.input}
disabled={this.props.disabled}
onFocus={this.handleInputFocus}
diff --git a/components/slider/__tests__/index.spec.js b/components/slider/__tests__/index.spec.js
index bd312cb7..2faefa4e 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();