Implements autoFocus

README.md

@@ -28,6 +28,12 @@ your own as long as it conforms to the shape.
   })
 ```
 
+AutoFocus on handle. If multiple handles are used, it focuses on the first one.
+
+```js
+  autoFocus: PropTypes.bool
+```
+
 Custom class name that will be applied to the root of Rheostat.
 
 ```js

src/Slider.jsx

@@ -39,6 +39,9 @@ const propTypes = forbidExtraProps({
   // Automatically adds a top position for large when enabled
   autoAdjustVerticalPosition: PropTypes.bool,
 
+  // Automatically sets focus on handle
+  autoFocus: PropTypes.bool,
+
   // the algorithm to use
   algorithm: PropTypes.shape({
     getValue: PropTypes.func,
@@ -109,6 +112,7 @@ const propTypes = forbidExtraProps({
 
 const defaultProps = {
   autoAdjustVerticalPosition: false,
+  autoFocus: false,
   children: null,
   algorithm: LinearScale,
   disabled: false,
@@ -778,6 +782,7 @@ class Rheostat extends React.Component {
     const {
       css,
       autoAdjustVerticalPosition,
+      autoFocus,
       algorithm,
       children,
       disabled,
@@ -831,6 +836,7 @@ class Rheostat extends React.Component {
                 aria-valuemin={this.getMinValue(idx)}
                 aria-valuenow={values[idx]}
                 aria-disabled={disabled}
+                autoFocus={autoFocus && idx === 0}
                 data-handle-key={idx}
                 key={idx /* eslint-disable-line react/no-array-index-key */}
                 orientation={orientation}

src/propTypes/HandlePropTypes.js

@@ -6,6 +6,7 @@ export default {
   'aria-valuenow': PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   'aria-disabled': PropTypes.bool,
   'data-handle-key': PropTypes.node,
+  autoFocus: PropTypes.bool,
   orientation: PropTypes.string,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
@@ -27,6 +28,7 @@ export const handleDefaultProps = {
   'aria-valuemax': undefined,
   'aria-valuemin': undefined,
   'aria-disabled': undefined,
+  autoFocus: undefined,
   onClick: undefined,
   onKeyDown: undefined,
   onMouseDown: undefined,

stories/ExampleSlider.jsx

@@ -66,6 +66,9 @@ storiesOf('Slider', module)
   .add('A Simple Slider', () => (
     <LabeledSlider />
   ))
+  .add('Handle autoFocus', () => (
+    <LabeledSlider autoFocus />
+  ))
   .add('Custom Handle', () => {
     function MyHandle({ style, handleRef, ...passProps }) {
       return (

test/slider-test.jsx

@@ -1,5 +1,6 @@
 import { shallow, mount } from 'enzyme';
 import React from 'react';
+import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
@@ -27,6 +28,16 @@ function testKeys(slider, tests) {
   });
 }
 
+function CustomHandle({ handleRef, ...passProps }) {
+  return <button id={Math.random().toString(36).substring(7)} type="button" ref={handleRef} {...passProps} />;
+}
+CustomHandle.propTypes = {
+  handleRef: PropTypes.any,
+};
+CustomHandle.defaultProps = {
+  handleRef: '',
+};
+
 describeWithDOM('<Slider />', () => {
   describe('render', () => {
     it('should render the slider with one handle by default', () => {
@@ -93,6 +104,20 @@ describeWithDOM('<Slider />', () => {
       assert.isTrue(pitRender.calledOnce, 'one pit was rendered only once');
     });
 
+    it('should set focus on handle if autoFocus prop is true', () => {
+      const wrapper = mount(<Slider handle={CustomHandle} autoFocus />);
+      const handleId = wrapper.find('button').prop('id');
+      const focusedElementId = document.activeElement.id;
+      assert.equal(handleId, focusedElementId, 'Slider\'s handle is focused');
+    });
+
+    it('should set focus on first handle when multiple handles are available', () => {
+      const wrapper = mount(<Slider handle={CustomHandle} values={[0, 50, 100]} autoFocus />);
+      const handleId = wrapper.find('button').first().prop('id');
+      const focusedElementId = document.activeElement.id;
+      assert.equal(handleId, focusedElementId, 'Slider\'s first handle is focused');
+    });
+
     it('should not throw react errors on disabled', () => {
       const slider = mount(<Slider />);
       slider.setProps({ disabled: true });