Merge pull request #2226 from yuri-sakharov/fix/on-select-resets-inpu…

…t-for-single

Regression fix for single select with onSelectResetsInput=false

README.md

@@ -381,7 +381,7 @@ function onInputKeyDown(event) {
 | `onInputKeyDown` | function | undefined | input keyDown handler; call `event.preventDefault()` to override default `Select` behaviour: `function(event) {}` |
 | `onMenuScrollToBottom` | function | undefined | called when the menu is scrolled to the bottom |
 | `onOpen` | function | undefined | handler for when the menu opens: `function () {}` |
-| `onSelectResetsInput` | boolean | true | whether the input value should be reset when options are selected, for `multi`
+| `onSelectResetsInput` | boolean | true | whether the input value should be reset when options are selected. Also input value will be set to empty if 'onSelectResetsInput=true' and Select will get new value that not equal previous value. |
 | `onValueClick` | function | undefined | onClick handler for value labels: `function (value, event) {}` |
 | `openOnClick` | boolean | true | open the options menu when the control is clicked (requires searchable = true) |
 | `openOnFocus` | boolean | false | open the options menu when the control gets focus |

src/Select.js

@@ -33,6 +33,26 @@ const stringOrNumber = PropTypes.oneOfType([
 
 let instanceId = 1;
 
+const shouldShowValue = (state, props) => {
+	const { inputValue, isPseudoFocused, isFocused } = state;
+	const { onSelectResetsInput } = props;
+
+	if (!inputValue) return true;
+
+	if (!onSelectResetsInput){
+		return !(!isFocused && isPseudoFocused || isFocused && !isPseudoFocused);
+	}
+
+	return false;
+};
+
+const shouldShowPlaceholder = (state, props, isOpen) => {
+	const { inputValue, isPseudoFocused, isFocused } = state;
+	const { onSelectResetsInput } = props;
+
+	return !inputValue || !onSelectResetsInput && !isOpen && !isPseudoFocused && !isFocused;
+};
+
 class Select extends React.Component {
 	constructor (props) {
 		super(props);
@@ -102,7 +122,7 @@ class Select extends React.Component {
 			this.setState({ required: false });
 		}
 
-		if (this.state.inputValue && this.props.value !== nextProps.value && this.props.onSelectResetsInput) {
+		if (this.state.inputValue && this.props.value !== nextProps.value && nextProps.onSelectResetsInput) {
 			this.setState({ inputValue: this.handleInputValueChange('') });
 		}
 	}
@@ -775,7 +795,8 @@ class Select extends React.Component {
 		let renderLabel = this.props.valueRenderer || this.getOptionLabel;
 		let ValueComponent = this.props.valueComponent;
 		if (!valueArray.length) {
-			return !this.state.inputValue ? <div className="Select-placeholder">{this.props.placeholder}</div> : null;
+			const showPlaceholder = shouldShowPlaceholder(this.state, this.props, isOpen);
+			return showPlaceholder ? <div className="Select-placeholder">{this.props.placeholder}</div> : null;
 		}
 		let onClick = this.props.onValueClick ? this.handleValueClick : null;
 		if (this.props.multi) {
@@ -796,7 +817,7 @@ class Select extends React.Component {
 					</ValueComponent>
 				);
 			});
-		} else if (!this.state.inputValue) {
+		} else if (shouldShowValue(this.state, this.props)) {
 			if (isOpen) onClick = null;
 			return (
 				<ValueComponent
@@ -824,6 +845,13 @@ class Select extends React.Component {
 				&& this.state.isFocused
 				&& !this.state.inputValue
 		});
+
+		let value = this.state.inputValue;
+		if (value && !this.props.onSelectResetsInput && !this.state.isFocused){
+			// it hides input value when it is not focused and was not reset on select
+			value= '';
+		}
+
 		const inputProps = {
 			...this.props.inputProps,
 			role: 'combobox',
@@ -841,7 +869,7 @@ class Select extends React.Component {
 			onFocus: this.handleInputFocus,
 			ref: ref => this.input = ref,
 			required: this.state.required,
-			value: this.state.inputValue,
+			value,
 		};
 
 		if (this.props.inputRenderer) {