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