What's the best way to wait for user to stop typing before performing fetch?

[booboothefool]

No description provided.

[moroshko]

You probably want to implement debouncing. Have a look at this example.

[nkbt]

@AndrewNoh you can use react-debounce-input

[oyeanuj]

@nkbt @moroshko I tried but ran into an error :( Since, I've been using @nkbt's react-debounce-input elsewhere on my project, I decided to use it conjunction with react-autosuggest. Unfortunately, on clicking on an item, I get the following error:

Uncaught TypeError: _this.input.focus is not a function
    at Object.Autosuggest._this.onSuggestionClick [as onClick]

The culprit seems to be the line here: https://github.com/moroshko/react-autosuggest/blob/master/src/Autosuggest.js#L241

  if (focusInputOnSuggestionClick === true) {
    this.input.focus();

Since both of you are on this thread about this very topic, I figure this might be the best place to ask :)

[moroshko]

@oyeanuj Could you provide a minimal Codepen/repo that demonstrates the issue?

[oyeanuj]

@moroshko Here you go: http://codepen.io/oyeanuj/pen/PbMbRe?editors=0010 (just minimally modified your codepen from above).

And thank you for the quick reply!

[moroshko]

Autosuggest docs suggest that renderInputComponent should pass through all the provided inputProps to the input element.

inputProps always have a ref key that is used to store a reference to the input element. The error you see is thrown because the input element wasn't stored. It wasn't stored because when you do <DebounceInput {...inputProps} />, the ref is consumed by DebounceInput rather than the input element itself.

If you could do <DebounceInput inputProps={inputProps} /> instead of <DebounceInput {...inputProps} />, this would solve the issue. @nkbt What do you think about updating the API of react-debounce-input to support that? Or, is there any other way to pass a ref to the underlying input element of DebounceInput?

[oyeanuj]

@moroshko Thanks for digging in! I just tried inputProps = {inputProps} method and -

1. I am getting a React unknown-prop warning.
2. The onChange function passed to React-Debounce-Input does not return the updated value as shown in the API signature in the docs.

It would be cleaner to have a way to pass the ref to the underlying input element if @nkbt agrees.

[nkbt]

You cannot really pass ref to the underlying element in React, unless it is somehow renamed. I am not quite sure it is a good idea.

[moroshko]

@nkbt Have a look at the example here. It's definitely possible to pass a ref to the input field, it just have to be under a different prop. I see two options:

Option 1

<DebounceInput inputRef={...} />

and you render <input ref={this.props.inputRef} />.

Option 2

<DebounceInput inputProps={inputProps} />

where inputProps.ref is provided, and you render <input {...this.props.inputProps} />.

My personal preference would be option 2, but I don't particularly care as long as there is a way to provide a ref to the input element.

Does this make sense?

[booboothefool]

Wow, this was a long time ago. But, thanks all. I debounce all the things now. I like using lodash's debounce. Great for things like preventing users from spamming a button too.

[moroshko]

Closing for now.

[ashwintastic]

@moroshko getting this error _' is not defined no-undef infront-of _.debounce Have I missed something ??