tbleckert / react-select-search

⚡️ Lightweight select component for React
https://react-select-search.com
MIT License
674 stars 149 forks source link

Async Input fetch when focus out #240

Open mannoeu opened 2 years ago

mannoeu commented 2 years ago

Describe the bug Async inputs are performing a fetch promise when focus out.

To Reproduce Steps to reproduce the behavior:

  1. Instantiate a new Async Input
 <SelectSearch
      options={[]}
      multiple
      debounce={1000}
      getOptions={(query) => {
        return new Promise((resolve, reject) => {
          fetch(
            `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${query}`
          )
            .then((response) => response.json())
            .then(({ drinks }) => {
              resolve(
                drinks.map(({ idDrink, strDrink }) => ({
                  value: idDrink,
                  name: strDrink,
                }))
              );
            })
            .catch(reject);
        });
      }}
      search
      placeholder="Your favorite drink"
    />
  1. When losing focus, a promise is executed (but there is no need as the box is closed and the field value is reset.)

Expected behavior It would not be necessary to fulfill the promise when the input loses focus unless the checkbox is visible. I believe it would be more appropriate to fulfill the promise when the box is opened again (on focus entry instead of focus loss)

Desktop