web: Fix #394 issue with cursor jumping in search components

Since the previous setState was called with older currentValue, the re-render in between onInputChange and setValue used to reset the input value and then set it back to the latest value which caused the cursor to jump to the end. Co-authored-by: Deepak Grover <[email protected]>
appbaseio · Aug 24, 2018 · 3741c3d · 3741c3d
1 parent 61e0801
commit 3741c3d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 20 deletions.
diff --git a/packages/web/src/components/search/CategorySearch.js b/packages/web/src/components/search/CategorySearch.js
@@ -303,6 +303,7 @@ class CategorySearch extends Component {
 		const performUpdate = () => {
 			this.setState({
 				currentValue: value,
+				suggestions: [],
 			}, () => {
 				if (isDefaultValue) {
 					if (this.props.autosuggest) {
@@ -409,16 +410,7 @@ class CategorySearch extends Component {
 				isOpen: true,
 			});
 		}
-		if (value.trim() !== this.state.currentValue.trim()) {
-			this.setState({
-				currentValue: value,
-				suggestions: [],
-			}, () => {
-				this.setValue(value);
-			});
-		} else {
-			this.setValue(value);
-		}
+		this.setValue(value);
 	};
 
 	onSuggestionSelected = (suggestion) => {

diff --git a/packages/web/src/components/search/DataSearch.js b/packages/web/src/components/search/DataSearch.js
@@ -262,6 +262,7 @@ class DataSearch extends Component {
 		const performUpdate = () => {
 			this.setState({
 				currentValue: value,
+				suggestions: [],
 			}, () => {
 				if (isDefaultValue) {
 					if (this.props.autosuggest) {
@@ -369,16 +370,7 @@ class DataSearch extends Component {
 				isOpen: true,
 			});
 		}
-		if (value.trim() !== this.state.currentValue.trim()) {
-			this.setState({
-				currentValue: value,
-				suggestions: [],
-			}, () => {
-				this.setValue(value);
-			});
-		} else {
-			this.setValue(value);
-		}
+		this.setValue(value);
 	};
 
 	onSuggestionSelected = (suggestion) => {