RemoteSelectField: Show default search results after selection/addition

Author: sakshamarora1

src/lib/forms/RemoteSelectField.js

@@ -8,6 +8,7 @@
 import axios from "axios";
 import _debounce from "lodash/debounce";
 import _uniqBy from "lodash/uniqBy";
+import _isEqual from "lodash/isEqual";
 import PropTypes from "prop-types";
 import queryString from "query-string";
 import React, { Component } from "react";
@@ -44,7 +45,7 @@ export class RemoteSelectField extends Component {
     this.cancellableAction && this.cancellableAction.cancel();
   }
 
-  onSelectValue = (event, { options, value, ...otherData }, callbackFunc) => {
+  onSelectValue = async (event, { options, value, ...otherData }, callbackFunc) => {
     const { multiple } = this.props;
     const newSelectedSuggestions = options.filter((item) => {
       if (multiple) {
@@ -65,9 +66,10 @@ export class RemoteSelectField extends Component {
       },
       () => callbackFunc(newSelectedSuggestions)
     );
+    await this.searchIfNoSuggestions(newSelectedSuggestions); // Reset search query to empty string after selection
   };
 
-  handleAddition = (e, { value }, callbackFunc) => {
+  handleAddition = async (e, { value }, callbackFunc) => {
     const { serializeAddedValue } = this.props;
     const { selectedSuggestions } = this.state;
     const selectedSuggestion = serializeAddedValue
@@ -83,9 +85,11 @@ export class RemoteSelectField extends Component {
           [...prevState.suggestions, ...newSelectedSuggestions],
           "value"
         ),
+        searchQuery: null,
       }),
       () => callbackFunc(newSelectedSuggestions)
     );
+    await this.searchIfNoSuggestions(newSelectedSuggestions); // Reset search query to empty string after addition
   };
 
   onSearchChange = _debounce(async (e, { searchQuery }) => {
@@ -99,7 +103,7 @@ export class RemoteSelectField extends Component {
     const query = preSearchChange(searchQuery);
     // If there is no query change, then display prevState suggestions
     const { searchQuery: prevSearchQuery } = this.state;
-    if (prevSearchQuery === searchQuery) {
+    if (prevSearchQuery === query) {
       return;
     }
     this.setState({ isFetching: true, searchQuery: query });
@@ -125,6 +129,14 @@ export class RemoteSelectField extends Component {
     }
   };
 
+  searchIfNoSuggestions = async (newSelectedSuggestions) => {
+    // If all the suggestions from the search query are selected, fetch all suggestions via API
+    const { suggestions } = this.state;
+    if (_isEqual(newSelectedSuggestions, suggestions)) {
+      await this.executeSearch("");
+    }
+  };
+
   fetchSuggestions = async (searchQuery) => {
     const {
       suggestionAPIUrl,