Uncaught TypeError: Cannot read property 'focus' of undefined

[ksandr-dev]

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)

[etairi]

Same here. Would be good if this can be fixed.

[mturki]

same error for me

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

[mouthzipper]

same error for me. Downgrading to 9.4.2 fixed the issue but looking forward to a fix in the new version :)

[maniranganathan97]

`import React, { Component } from 'react'; import Radium from 'radium'; import './Person.css' import styled from 'styled-components'; import Aux from '../../../hoc/Auxillary'; import PropTypes from 'prop-types'; // import Person from '../../../Persons/Person/Person'; import Auxillary from '../../../hoc/Auxillary';

class Person extends Component { constructor(props){ super(props); this.inputElementRef = React.createRef; }

componentDidMount(){ this.inputElementRef.current.focus(); }

render() {
    return (
        // <div className="Person" style={style}> 
        <Auxillary>
            <p onClick={this.props.clicked}>Hi,I am {this.props.name}! and I am {this.props.age} years old</p>
            <p>{this.props.children}</p>
            <input type="text" 
            // ref = {(inputEle) =>this.inputElement=inputEle}
            ref={this.inputElementRef}
            onChange={this.props.changed} 
            value={this.props.name} />
        </Auxillary>
        // </div>

    )
}

}

Person.propTypes = { name: PropTypes.string, age: PropTypes.number };

export default Person;`

Please help me

Advance Thanks for the HELP

[MickL]

Having the same issue. May there be a fix soon?

[chandanahuja193]

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

return ( <TextField error={!!error} label={label} fullWidth inputRef={inputProps.inputRef} {...rest} /> ) }

[chandanahuja193]

Use this

[louiidev]

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

property 'inputRef' does not exist on type 'InputProps

[mobinakhalilzade]

same issue for me . I get "Cannot read property 'focus' of undefined" error when I set focus on dropdown

[chandanahuja193]

     First define the object with the name of this.errorRef = {}; in constructor.

This is the textfield of Mui
<TextFieldInput name='targetedAmount' type='number' required={true}v alue={this.state.targetedAmount} handleChange={(eventData) => { this.setState({ [eventData.target.name]: Number(eventData.target.value) }) }} inputRef={input => (this.errorRef.targetedAmount = input)} />

And in your validate functioin use like this. this.errorRef.targetedAmount.focus()

[chandanahuja193]

`import React, { Component } from 'react'; import Radium from 'radium'; import './Person.css' import styled from 'styled-components'; import Aux from '../../../hoc/Auxillary'; import PropTypes from 'prop-types'; // import Person from '../../../Persons/Person/Person'; import Auxillary from '../../../hoc/Auxillary';

class Person extends Component { constructor(props){ super(props); this.inputElementRef = React.createRef; }

componentDidMount(){ this.inputElementRef.current.focus(); }

render() {
    return (
        // <div className="Person" style={style}> 
        <Auxillary>
            <p onClick={this.props.clicked}>Hi,I am {this.props.name}! and I am {this.props.age} years old</p>
            <p>{this.props.children}</p>
            <input type="text" 
            // ref = {(inputEle) =>this.inputElement=inputEle}
            ref={this.inputElementRef}
            onChange={this.props.changed} 
            value={this.props.name} />
        </Auxillary>
        // </div>

    )
}

}

Person.propTypes = { name: PropTypes.string, age: PropTypes.number };

export default Person;`

Please help me

Advance Thanks for the HELP

Material ui doesnot use the reference . It uses the inputRef. this.inputElementRef = {} in constructor and use this inputRef = {(inputEle) =>this.inputElement=inputEle}

[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.

[pimterry]

@cameronblandford are you saying you're not using renderInputComponent at all? It doesn't matter whether it's an external library - this issue is usually caused by using renderInputComponent but not passing inputProps.ref correctly.

If you're not using renderInputComponent at all, can you please include some code demonstrating your issue? It's probably a separate problem, but it would be good to look into that.

[piro0919]

I also encountered the same error in renderInputComponent, but I was able to avoid the error by using forwardRef.

🙅‍♂️

const Input = (props: InputProps): JSX.Element => (
  <input {...props} />
);

🙆‍♂️

const Input = forwardRef<HTMLInputElement, Omit<InputProps, "ref">>(
  (props: Omit<InputProps, "ref">, ref): JSX.Element => (
    <input {...props} ref={ref} />
  )
);