Skip to content

Commit

Permalink
Merge pull request #2002 from JedWatson/update/autofocus-prop
Browse files Browse the repository at this point in the history
autofocus --> autoFocus
  • Loading branch information
JedWatson authored Sep 21, 2017
2 parents 94f1ae1 + 8f1f884 commit eb2dfba
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 4 deletions.
2 changes: 1 addition & 1 deletion examples/src/components/States.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions src/Select.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}
Expand Down Expand Up @@ -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
Expand Down
40 changes: 39 additions & 1 deletion test/Select-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ class PropsWrapper extends React.Component {
super(props);
this.state = props || {};
}

setPropsForChild(props) {
this.setState(props);
}
Expand Down Expand Up @@ -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');
});
});
});

0 comments on commit eb2dfba

Please sign in to comment.