Uncaught TypeError: Cannot read property 'focus' of undefined

I met error when I use renderInputComponent API.

autosuggest.js:698 Uncaught TypeError: Cannot read property 'focus' of undefined
    at Object.onSuggestionClick [as onClick] (autosuggest.js:698)
    at Item._this.onClick (autosuggest.js:2941)
    at Object.ReactErrorUtils.invokeGuardedCallback (react-dom.js:9017)
    at executeDispatch (react-dom.js:3006)
    at Object.executeDispatchesInOrder (react-dom.js:3029)
    at executeDispatchesAndRelease (react-dom.js:2431)
    at executeDispatchesAndReleaseTopLevel (react-dom.js:2442)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (react-dom.js:15423)
    at Object.processEventQueue (react-dom.js:2645)

[cameronblandford]

I got this error, but wasn’t using any external library for the input.

What fixed it for me was adding focusInputOnSuggestionClick={false} to the AutoSuggest props. Seems like it’s enabled by default and the component lost track of its own ref and errored out.

[bdmason]

renderInputComponent receives a ref in the component, this needs to be attached to your input component. I’m using MUI and this solves it:

const renderInputComponent = inputProps => {
  const { error, label, ref, ...rest } = inputProps

  return (
    <TextField
      error={!!error}
      label={label}
      fullWidth
      InputProps={{
        inputRef: node => {
          ref(node)
        },
      }}
      {...rest}
    />
  )
}

You can do this if you’re using a basic HTML input tag:

<input ref={ref} />