diff --git a/examples/src/components/States.js b/examples/src/components/States.js index 8c642a3b9e..49dc312525 100644 --- a/examples/src/components/States.js +++ b/examples/src/components/States.js @@ -53,7 +53,7 @@ var StatesField = createClass({ return (

{this.props.label}

-
diff --git a/src/Select.js b/src/Select.js index 0804e1832c..1c593413e1 100644 --- a/src/Select.js +++ b/src/Select.js @@ -78,7 +78,10 @@ class Select extends React.Component { } componentDidMount () { - if (this.props.autofocus) { + if (typeof this.props.autofocus !== 'undefined' && typeof console !== 'undefined') { + console.warn('Warning: The autofocus prop will be deprecated in react-select1.0.0 in favor of autoFocus to match React\'s autoFocus prop'); + } + if (this.props.autoFocus || this.props.autofocus) { this.focus(); } } @@ -1050,7 +1053,8 @@ Select.propTypes = { addLabelText: PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input arrowRenderer: PropTypes.func, // Create drop-down caret element autoBlur: PropTypes.bool, // automatically blur the component when an option is selected - autofocus: PropTypes.bool, // autofocus the component on mount + autofocus: PropTypes.bool, // deprecated; use autoFocus instead + autoFocus: PropTypes.bool, // autofocus the component on mount autosize: PropTypes.bool, // whether to enable autosizing or not backspaceRemoves: PropTypes.bool, // whether backspace removes an item if there is no text input backspaceToRemoveMessage: PropTypes.string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label diff --git a/test/Select-test.js b/test/Select-test.js index 3fa89c021d..69643441ab 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -39,7 +39,6 @@ class PropsWrapper extends React.Component { super(props); this.state = props || {}; } - setPropsForChild(props) { this.setState(props); } @@ -3954,4 +3953,43 @@ describe('Select', () => { expect(input, 'to equal', document.activeElement); }); }); + + describe('with autoFocus', () => { + it('focuses select input on mount', () => { + wrapper = createControl({ + autoFocus: true, + options: defaultOptions, + }); + var input = ReactDOM.findDOMNode(instance.input).querySelector('input'); + expect(input, 'to equal', document.activeElement); + }); + it('with autofocus as well, calls focus() only once', () => { + wrapper = createControl({ + autofocus: true, + autoFocus: true, + options: defaultOptions, + }); + var focus = sinon.spy(instance, 'focus'); + instance.componentDidMount(); + expect(focus, 'was called once'); + }); + }); + describe('with autofocus', () => { + it('focuses the select input on mount', () => { + wrapper = createControl({ + autofocus: true, + options: defaultOptions, + }); + var input = ReactDOM.findDOMNode(instance.input).querySelector('input'); + expect(input, 'to equal', document.activeElement); + }); + it('calls console.warn', () => { + var warn = sinon.spy(console, 'warn'); + wrapper = createControl({ + autofocus: true, + options: defaultOptions, + }); + expect(warn, 'was called once'); + }); + }); });