react-autosuggest: 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)

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 5
Comments: 15

Most upvoted comments

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.

cameronblandford on Nov 23, 2020

I get a typescript error when trying to use ref or inputRef:

property 'inputRef' does not exist on type 'InputProps

louiidev on Mar 13, 2020

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} />

bdmason on Aug 13, 2019