Merge pull request #312 from appfolio/feature/add-focus-to-date-input

kg: add focus functionality to DateInput

src/components/DateInput.js

@@ -220,6 +220,10 @@ export default class DateInput extends React.Component {
     }
   }
 
+  focus() {
+    this.inputEl.focus();
+  }
+
   render() {
     const { className, dateVisible, disabled, footer, header, showOnFocus } = this.props;
     const { open } = this.state;

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

@@ -284,4 +284,12 @@ describe('<DateInput />', () => {
     mount(<DateInput parse={callback} defaultValue="1-2-3" dateFormat="MM-DD-YY" />);
     assert(callback.calledWith('1-2-3', 'MM-DD-YY'));
   });
+
+  it('should support focus', () => {
+    const wrapper = mount(<DateInput defaultValue="1/23/1983" />);
+    const component = wrapper.instance();
+    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);
+  });
 });