react-select-search
react-select-search copied to clipboard
Async Input fetch when focus out
Describe the bug Async inputs are performing a fetch promise when focus out.
To Reproduce Steps to reproduce the behavior:
- 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"
/>
- 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