React-autosuggest: Cannot read property 'focus' of undefined

[luke-unifymonitor]

Hi,

I'm attempting to use this with Bootstrap 4. So far I have this....

https://codesandbox.io/s/94x17rv0yr

which works up to the point where I click the suggestion and get:

Cannot read property 'focus' of undefined

Steps to reproduce the issue:

1. Focus on the input field
2. Type c, and wait for suggestions to appear
3. Click a Suggestion

Any ideas why? I'm new to React and Bootstrap so I'm prepared for a face palm moment :)

Thanks.

[fravic]

Hi @luke-unifymonitor -- Your codesandbox isn't working for me, but I recently ran into this error, and perhaps this might help. I was providing react-autosuggest with renderInputComponent like this:

  renderInputComponent={(inputProps) => (
    <input {...inputProps} ref={this.setInputRef} />
  )}

The problem is that this overrides the ref function in inputProps. To fix, you can call both ref functions:

...
ref={(input) => {
  if (inputProps.ref) {
    inputProps.ref(input);
  }
  this.setInputRef(input);
}}
...

Does that work?

[luke-unifymonitor]

Many thanks for the response @fravic

I didn't get to the bottom of the problem in the end. I ended up starting from scratch and got it working. Here's a new codesandbox....

https://codesandbox.io/s/912px0x6zw

Hopefully somebody using react-autosuggest with bootstrap v4 will find it useful.

[BradyEdgar94]

For me, I only had this issue when I clicked on the renderSuggestionsContainer component. To fix it I had to change:
renderInputComponent={(props) => <SearchField {...props} />}
to
renderInputComponent={SearchField}

Hope this helped