Implement rolling delay before loadAsyncOptions feature

[oliversong]

Addresses #459

Adds the ability to pass in a timeout prop. react-select will now wait delayAsyncMs milliseconds before calling loadAsyncOptions, and keep resetting the delay on every new input change until delayAsyncMs milliseconds passes without an input change.

Needs tests. Sorry, didn't have time to figure that out yet, but hopefully this will be useful for somebody!

[oliversong]

Quick note that this._optionsFilterString is preferable to event.target.value, since in the case of this function it doesn't require the argument to be redefined in its closure.

[mmahalwy]

any uck with this?

[tommyalvarez]

@oliversong can you fix the coverage downgrade?

[JedWatson]

Thanks for the PR @oliversong but I'd prefer this was left for users to implement in the function that's passed to loadOptions

You can do this really simply by wrapping the method in lodash's debounce method (or similar) without adding any more logic to react-select

[craigmichaelmartin]

For those doing so, be aware that Lodash's debounce function isn't suitable for this. A promise-returning debounce method where subsequent calls return promises which will resolve to the result of the next func invocation in needed. See #3075 (comment)

[ebonow]

For those doing so, be aware that Lodash's debounce function isn't suitable for this. A promise-returning debounce method where subsequent calls return promises which will resolve to the result of the next func invocation in needed. See #3075 (comment)

For those looking for a solution, please feel free to try the solution suggested here: #614 (comment)

const loadOptions = React.useCallback(
  debounce((inputValue, callback) => {
    getOptions(inputValue).then(options => callback(options))
  }, 500),
  []
);

return <AsyncSelect loadOptions={loadOptions} {...otherProps} />

Demo: codesandbox

[AndrejGajdos]

@ebonow take into account useCallback throws React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead. warning