Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Async results not selectable

See original GitHub issue

Hello,

Just wanted to mention that I had some difficulty implementing the async promise-based approach to using this library.

The issue I was having is that when a user selects an option that was populated by async API, it doesn’t appear to properly select, and doesn’t fire any events.

This behavior can be seen here: https://react-select-search.com/?path=/story/async--fetch

The way I ended up fixing this is by additionally writing the results for the API call to an object I passed to options, instead of passing an empty array as the example above models.

i.e.:




useEffect(() => {
  ApiClient.get("/search")
    .then((res) => setallStocks(formatStocks(res.data)))
    .catch(console.log);
}, []);

const matchStocks = function (searchTerm) {
    // console.log("searchTerm is ", searchTerm, typeof searchTerm);
    searchTerm = searchTerm.toUpperCase();
    var filteredArray = allStocks.filter(function (obj) {
      return obj.value.includes(searchTerm);
    });

    return filteredArray;
  };

const formatStocks = function (data) {
  console.log("unformatted data is ", data);

  let array = [];

  data.forEach(function (el) {
    array.push({
      name: el["name"],
      value: el["name"],
      exchange: el["exchange"]
    });
  });

  // console.log("allstocks is", array);
  console.log("formatted data is ", array);
  return array;
};



const handleSelect = function (selectedStock) {
  console.log("handling change", selectedStock);

  // unfortunately, search module just returns value, not obj, so we have to search again to find exchange

  var theStock = matchingStocks.filter(function (obj) {
    return obj.value == selectedStock;
  });

    console.log(exchangeCode);

    console.log(history);
    history.push({
      pathname: `/stock/${exchangeCode}:${theStock[0]["name"] + "/D"}`
    });
  }
};

const getOptions = function (query) {
  let results = matchStocks(query);
  setMatchingStocks(results);
  return results;
};


return (
  <div class="topBar">
    <SelectSearch
      options={matchingStocks}
      onChange={handleSelect}
      getOptions={(query) => {
        return new Promise((resolve, reject) => {
          resolve(getOptions(query));
        });
      }}
      search
      autoComplete="false"
      placeholder="Search..."
    />
  </div>