Merge pull request #2002 from JedWatson/update/autofocus-prop

autofocus --> autoFocus

examples/src/components/States.js

@@ -53,7 +53,7 @@ var StatesField = createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
-				<Select ref="stateSelect" autofocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
+				<Select ref="stateSelect" autoFocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
 
 				<div style={{ marginTop: 14 }}>
 					<button type="button" onClick={this.focusStateSelect}>Focus Select</button>

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

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');
+		});
+	});
 });