react-select-search icon indicating copy to clipboard operation
react-select-search copied to clipboard

Async Input fetch when focus out

Open mannoeu opened this issue 2 years ago • 0 comments

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

  • Windows 11
  • Chrome
  • Version ^3.0.9

mannoeu avatar Jun 19 '22 04:06 mannoeu