Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Async Input fetch when focus out #240

Open
mannoeu opened this issue Jun 19, 2022 · 0 comments
Open

Async Input fetch when focus out #240

mannoeu opened this issue Jun 19, 2022 · 0 comments

Comments

@mannoeu
Copy link

mannoeu commented Jun 19, 2022

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 mannoeu closed this as completed Jun 19, 2022
@mannoeu mannoeu changed the title Add debounce or throttle in Async Input Async Input fetch when focus out Jun 19, 2022
@mannoeu mannoeu reopened this Jun 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant