Add keepCursorAtEnd prop for single value input

README.md

@@ -294,7 +294,7 @@ You can manipulate the input by providing a `onInputChange` callback that return
 function cleanInput(inputValue) {
     // Strip all non-number characters from the input
     return inputValue.replace(/[^0-9]/g, "");
-}   
+}
 
 <Select
     name="form-field-name"
@@ -361,6 +361,7 @@ function onInputKeyDown(event) {
 | `instanceId` | string | increment | instance ID used internally to set html ids on elements for accessibility, specify for universal rendering |
 | `isLoading` | boolean | false | whether the Select is loading externally or not (such as options being loaded) |
 | `joinValues` | boolean | false | join multiple values into a single hidden input using the `delimiter` |
+| `keepCursorAtEnd` | boolean | false | keeps the cursor at the end of the input (for non multi selects, ignores `onBlurResetsInput` and `backspaceRemoves` for single value) |
 | `labelKey` | string | 'label' | the option property to use for the label |
 | `matchPos` | string | 'any' | (any, start) match the start or entire string when filtering |
 | `matchProp` | string | 'any' | (any, label, value) which option property to filter on |

examples/src/components/GithubUsers.js

@@ -52,6 +52,11 @@ const GithubUsers = createClass({
 			backspaceRemoves: !this.state.backspaceRemoves
 		});
 	},
+	toggleKeepCursorAtEnd () {
+		this.setState({
+			keepCursorAtEnd: !this.state.keepCursorAtEnd
+		});
+	},
 	toggleCreatable () {
 		this.setState({
 			creatable: !this.state.creatable
@@ -65,7 +70,7 @@ const GithubUsers = createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/GithubUsers.js">(Source)</a></h3>
-				<AsyncComponent multi={this.state.multi} value={this.state.value} onChange={this.onChange} onValueClick={this.gotoUser} valueKey="id" labelKey="login" loadOptions={this.getUsers} backspaceRemoves={this.state.backspaceRemoves} />
+				<AsyncComponent multi={this.state.multi} value={this.state.value} onChange={this.onChange} onValueClick={this.gotoUser} valueKey="id" labelKey="login" loadOptions={this.getUsers} backspaceRemoves={this.state.backspaceRemoves} keepCursorAtEnd={this.state.keepCursorAtEnd}/>
 				<div className="checkbox-list">
 					<label className="checkbox">
 						<input type="radio" className="checkbox-control" checked={this.state.multi} onChange={this.switchToMulti}/>
@@ -81,6 +86,10 @@ const GithubUsers = createClass({
 					   <input type="checkbox" className="checkbox-control" checked={this.state.creatable} onChange={this.toggleCreatable} />
 					   <span className="checkbox-label">Creatable?</span>
 					</label>
+					<label className="checkbox">
+					   <input type="checkbox" className="checkbox-control" checked={this.state.keepCursorAtEnd} onChange={this.toggleKeepCursorAtEnd} />
+					   <span className="checkbox-label">Keep Cursor at the end? (Single value)</span>
+					</label>
 					<label className="checkbox">
 					   <input type="checkbox" className="checkbox-control" checked={this.state.backspaceRemoves} onChange={this.toggleBackspaceRemoves} />
 					   <span className="checkbox-label">Backspace Removes?</span>

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "classnames": "^2.2.4",
     "prop-types": "^15.5.8",
-    "react-input-autosize": "^2.1.0"
+    "react-input-autosize": "=2.1.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

src/Select.js

@@ -61,8 +61,14 @@ class Select extends React.Component {
 			'selectValue',
 		].forEach((fn) => this[fn] = this[fn].bind(this));
 
+		let inputValue = '';
+		if (!props.multi && props.keepCursorAtEnd && props.value) {
+			var valueArray = this.getValueArray(props.value);
+			inputValue = valueArray[0][props.labelKey];
+		}
+
 		this.state = {
-			inputValue: '',
+			inputValue: inputValue,
 			isFocused: false,
 			isOpen: false,
 			isPseudoFocused: false,
@@ -357,7 +363,7 @@ class Select extends React.Component {
 			isOpen: false,
 			isPseudoFocused: false,
 		};
-		if (this.props.onBlurResetsInput) {
+		if (this.props.onBlurResetsInput && !this.props.keepCursorAtEnd) {
 			onBlurredState.inputValue = this.handleInputValueChange('');
 		}
 		this.setState(onBlurredState);
@@ -368,6 +374,9 @@ class Select extends React.Component {
 
 		if (this.state.inputValue !== event.target.value) {
 			newInputValue = this.handleInputValueChange(newInputValue);
+			if (newInputValue.length === 0 && this.props.keepCursorAtEnd && !this.props.multi) {
+				this.popValue();
+			}
 		}
 
 		this.setState({
@@ -575,10 +584,11 @@ class Select extends React.Component {
 				}
 			});
 		} else {
+			const inputValue = this.props.keepCursorAtEnd ? value[this.props.labelKey] : '';
 			this.setState({
-				inputValue: this.handleInputValueChange(''),
+				inputValue: this.handleInputValueChange(inputValue),
 				isOpen: !this.props.closeOnSelect,
-				isPseudoFocused: this.state.isFocused,
+				isPseudoFocused: this.props.keepCursorAtEnd ? false : this.state.isFocused,
 			}, () => {
 				this.setValue(value);
 			});
@@ -806,6 +816,7 @@ class Select extends React.Component {
 			'aria-labelledby': this.props['aria-labelledby'],
 			'aria-label': this.props['aria-label'],
 			className: className,
+			autoComplete: 'off',
 			tabIndex: this.props.tabIndex,
 			onBlur: this.handleInputBlur,
 			onChange: this.handleInputChange,
@@ -1133,6 +1144,7 @@ Select.propTypes = {
 	instanceId: PropTypes.string,         // set the components instanceId
 	isLoading: PropTypes.bool,            // whether the Select is loading externally or not (such as options being loaded)
 	joinValues: PropTypes.bool,           // joins multiple values into a single form field with the delimiter (legacy mode)
+	keepCursorAtEnd: PropTypes.bool,      // keeps the cursor at the end of the input (for non multi selects)
 	labelKey: PropTypes.string,           // path of the label value in option objects
 	matchPos: PropTypes.string,           // (any|start) match the start or entire string when filtering
 	matchProp: PropTypes.string,          // (any|label|value) which option property to filter on
@@ -1201,6 +1213,7 @@ Select.defaultProps = {
 	inputProps: {},
 	isLoading: false,
 	joinValues: false,
+	keepCursorAtEnd: false,
 	labelKey: 'label',
 	matchPos: 'any',
 	matchProp: 'any',

test/Select-test.js

@@ -4028,6 +4028,57 @@ describe('Select', () => {
 		});
 	});
 
+	describe('when keepCursorAtEnd=true', () => {
+			it('should have isPseudoFocused return a falsy value', () => {
+				const instance = createControl({
+						options: [1,2,3],
+						keepCursorAtEnd: true,
+				});
+				expect(instance.state.isPseudoFocused, 'to be false');
+			});
+
+			it('should have an inputValue equal to the option label if value is provided', () => {
+				const instance = createControl({
+						options: [
+							{ value: 'one', label: 'label one' },
+							{ value: 'two', label: 'label two' },
+							{ value: 'three', label: 'label three' }
+						],
+						value: 'two',
+						keepCursorAtEnd: true,
+				});
+				expect(instance.state.inputValue, 'to equal', 'label two');
+			});
+
+			it('should have an inputValue equal to empty string if multi=true', () => {
+				const instance = createControl({
+						options: [
+							{ value: 'one', label: 'label one' },
+							{ value: 'two', label: 'label two' },
+							{ value: 'three', label: 'label three' }
+						],
+						multi: true,
+						value: 'two',
+						keepCursorAtEnd: true,
+				});
+				expect(instance.state.inputValue, 'to equal', '');
+			});
+
+			it('should remove inputValue if newInputValue is length 0, and multi=false', () => {
+				const instance = createControl({
+						options: [
+							{ value: 'two', label: 'label two' },
+						],
+						multi: false,
+						value: 'two',
+						keepCursorAtEnd: true,
+				});
+				typeSearchText('');
+				expect(instance.state.inputValue, 'to equal', '');
+			});
+
+	});
+
 	describe('custom arrowRenderer option', () => {
 		it('should render the custom arrow', () => {
 			const instance = createControl({