React-select: Option to wait before sending queries for asyncOptions

Created on 19 Sep 2015 · 6Comments · Source: JedWatson/react-select

It would be nice if we could specify a time delay to wait after the last keystroke before calling asyncOptions, so it doesn't make unnecessary requests.

Source

oliversong

Most helpful comment

For those who might need, for now you can have debouncing by wrapping your loadOptions callback by lodash/debounce

const wait = 500; // milliseconds
const loadOptions = input => dataStore.getData(input)
const debouncedLoadOptions = _.debounce(loadOptions, wait)

return <Async loadOptions={debouncedLoadOptions} ... />

duytbp on 1 Aug 2017

👍3 👎1

All 6 comments

Bump, as far as I can see asyncOptions are fired on change, is it possible to fire it when user stops typing?

PSkierniewski on 28 Sep 2015

It's implemented in my branch https://github.com/JedWatson/react-select/pull/473 @PSkierniewski

oliversong on 30 Sep 2015

@oliversong Thx I used it and it works.

PSkierniewski on 1 Oct 2015

@oliversong i need this too. Can you check the PR for this feature to fix it so it can be merged?

tommyalvarez on 1 Aug 2017

For those who might need, for now you can have debouncing by wrapping your loadOptions callback by lodash/debounce

const wait = 500; // milliseconds
const loadOptions = input => dataStore.getData(input)
const debouncedLoadOptions = _.debounce(loadOptions, wait)

return <Async loadOptions={debouncedLoadOptions} ... />

duytbp on 1 Aug 2017

👍3 👎1

It looks like @JedWatson has expressed that this be left for users to implement in the function that's passed to loadOptions.

For those doing so, Lodash's debounce function is not suited for this. Instead, a promise-returning debounce method where subsequent calls return promises which will resolve to the result of the next func invocation in needed. See https://github.com/JedWatson/react-select/issues/3075#issuecomment-450194917