kg: add focus for Select component

src/components/Select.js

@@ -41,6 +41,12 @@ class Select extends React.Component {
     this.props.onChange(value);
   }
 
+  bindInput = el => this.selectEl = el;
+
+  focus() {
+    this.selectEl.focus();
+  }
+
   render() {
     const { value, ...props } = this.props;
     delete props.onChange; // don't pass onChange prop to react-select
@@ -54,6 +60,7 @@ class Select extends React.Component {
         inputProps={{ ...props.inputProps, name: props.name || '' }}
         onChange={this.onChange}
         value={value || this.state.value}
+        ref={this.bindInput}
         {...props}
       />
     );

test/components/DateInput.spec.js

@@ -288,6 +288,8 @@ describe('<DateInput />', () => {
   it('should support focus', () => {
     const wrapper = mount(<DateInput defaultValue="1/23/1983" />);
     const component = wrapper.instance();
-    assert.equal(typeof component.focus, 'function');
+    sinon.spy(component.inputEl, 'focus');
+    component.focus();
+    assert.equal(component.inputEl.focus.calledOnce, true);
   });
 });

test/components/Select.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import assert from 'assert';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import sinon from 'sinon';
 
 import ReactSelect from 'react-select-plus';
@@ -79,4 +79,12 @@ describe('<Select />', () => {
     const component = shallow(<Select loadOptions={getOptions} />);
     assert.equal(component.type(), ReactSelect.Async);
   });
+
+  it('should support focus', () => {
+    const wrapper = mount(<Select />);
+    const component = wrapper.instance();
+    sinon.spy(component.selectEl, 'focus');
+    component.focus();
+    assert.equal(component.selectEl.focus.calledOnce, true);
+  });
 });