From e6dbba6e2b36b639bc106b4f2772fbbd0511797e Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Wed, 13 Sep 2017 12:37:30 +1000 Subject: [PATCH 1/4] autoFocus prop added, logic added for warning on use of autofocus --- src/Select.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Select.js b/src/Select.js index e07876de4c..1e2ba0a156 100644 --- a/src/Select.js +++ b/src/Select.js @@ -78,8 +78,11 @@ class Select extends React.Component { } componentDidMount () { - if (this.props.autofocus) { - this.focus(); + 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(); } } @@ -1048,7 +1051,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] autofocus the component on mount + 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 From 58aecaa9efa6a667d326f4b771101812e3e9f76c Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Thu, 14 Sep 2017 11:53:15 +1000 Subject: [PATCH 2/4] added tests --- src/Select.js | 4 ++-- test/Select-test.js | 40 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src/Select.js b/src/Select.js index 1e2ba0a156..7844d4a8b6 100644 --- a/src/Select.js +++ b/src/Select.js @@ -79,10 +79,10 @@ class Select extends React.Component { componentDidMount () { 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'); + 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(); + this.focus(); } } diff --git a/test/Select-test.js b/test/Select-test.js index fa4a4555eb..c7f1a5266c 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); } @@ -3930,4 +3929,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'); + }); + }); }); From afd8c17f48a5969da50f11dea71d85f1d7405e14 Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Fri, 15 Sep 2017 10:02:31 +1000 Subject: [PATCH 3/4] update States.js example --- examples/src/components/States.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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}

-
From 8f1f88438d9acd917e60a280ff401cec5dae88e6 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Thu, 21 Sep 2017 11:27:05 +1000 Subject: [PATCH 4/4] Fix comment for autofocus prop --- src/Select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Select.js b/src/Select.js index 7844d4a8b6..dc6eb7157b 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1051,8 +1051,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, // [DEPRECATED] autofocus the component on mount - 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