fix: suggestions dropdown for same query

appbaseio · Jul 8, 2020 · 5109189 · 5109189
1 parent d73ace6
commit 5109189
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/reactivecore b/packages/reactivecore
diff --git a/packages/vue/src/components/search/DataSearch.jsx b/packages/vue/src/components/search/DataSearch.jsx
@@ -396,6 +396,12 @@ const DataSearch = {
 				}
 
 				this.$emit('valueChange', value);
+				// Set the already fetched suggestions if query is same as used last to fetch the hits
+				if (value === this.lastUsedQuery) {
+					this.suggestions = this.onSuggestions(this.suggestions)
+					// invoke on suggestions
+					this.$emit('suggestions', this.suggestions);
+				}
 			};
 
 			checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
@@ -1029,6 +1035,7 @@ const mapStateToProps = (state, props) => ({
 	hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
 	querySuggestions: state.querySuggestions[props.componentId],
 	componentProps: state.props[props.componentId],
+	lastUsedQuery: state.queryToHits[props.componentId],
 });
 const mapDispatchtoProps = {
 	addComponent,

diff --git a/packages/web/src/components/search/DataSearch.js b/packages/web/src/components/search/DataSearch.js
@@ -369,6 +369,16 @@ class DataSearch extends Component {
 							this.handleTextChange(value);
 						}
 						if (props.onValueChange) props.onValueChange(value);
+						// Set the already fetched suggestions if query is same as used last to fetch the hits
+						if (value === props.lastUsedQuery) {
+							this.setState({
+								suggestions: this.onSuggestions(this.props.suggestions),
+							});
+							// invoke on suggestions
+							if (this.props.onSuggestions) {
+								this.props.onSuggestions(this.props.suggestions);
+							}
+						}
 					},
 				);
 			} else {
@@ -975,6 +985,7 @@ DataSearch.propTypes = {
 	error: types.title,
 	isLoading: types.bool,
 	config: types.props,
+	lastUsedQuery: types.string,
 	// component props
 	autoFocus: types.bool,
 	autosuggest: types.bool,
@@ -1089,6 +1100,7 @@ const mapStateToProps = (state, props) => ({
 	total: state.hits[props.componentId] && state.hits[props.componentId].total,
 	hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
 	querySuggestions: state.querySuggestions[props.componentId],
+	lastUsedQuery: state.queryToHits[props.componentId],
 });
 
 const mapDispatchtoProps = dispatch => ({