diff --git a/src/components/DateInput.js b/src/components/DateInput.js index 7be298ff6..82b925c2f 100644 --- a/src/components/DateInput.js +++ b/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; diff --git a/src/components/Select.js b/src/components/Select.js index f2d618234..b5c02ada3 100644 --- a/src/components/Select.js +++ b/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} /> ); diff --git a/test/components/DateInput.spec.js b/test/components/DateInput.spec.js index 168bd446d..7d4fee9b0 100644 --- a/test/components/DateInput.spec.js +++ b/test/components/DateInput.spec.js @@ -284,4 +284,12 @@ describe('', () => { mount(); assert(callback.calledWith('1-2-3', 'MM-DD-YY')); }); + + it('should support focus', () => { + const wrapper = mount(); + const component = wrapper.instance(); + sinon.spy(component.inputEl, 'focus'); + component.focus(); + assert.equal(component.inputEl.focus.calledOnce, true); + }); }); diff --git a/test/components/Select.spec.js b/test/components/Select.spec.js index 658e894b3..e696a1fa8 100644 --- a/test/components/Select.spec.js +++ b/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('); assert.equal(component.type(), ReactSelect.Async); }); + + it('should support focus', () => { + const wrapper = mount(