React-autosuggest: _this4.input.focus is not a function

[mbulfair]

Question

I am not sure this is a bug, but I've tried everything I've seen related to this issue. I am using a customer component that renders a <input> it's buried in a div and a label

Input Component

 <input {...props} className={inputStyles.input} ref={this.props.inputRef} />

The ref is passed by prop as inputRef

AutoSuggest truncated

import Input from "@component/input";

 class MyClass extends Component { 
    constructor(props) {
    super(props);
 }
 renderInputComponent = inputProps => <Input inputRef={inputProps.ref} ref={null} {...inputProps} />;

render() {
    const inputProps = {
      ...this.props.inputProps,
      value,
      onChange: this.onChange
    };
    return (
      <Autosuggest
        theme={localizationStyles}
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.onRenderSuggestion}
        renderInputComponent={this.renderInputComponent}
        inputProps={inputProps}
      />
    );

}

When I select a option from the dropdown I get an error, and focus isn't passed. I've tried everything I can think of to pass the ref to my custom component.

[ankurkaushal360]

I am getting the same error when I click a suggestion from the list. Has anyone found a fix or workaround?

[ankurkaushal360]

@mbulfair: You might want to take a look at this issue: https://github.com/moroshko/react-autosuggest/issues/318

[piotrlo]

Hey @mbulfair,

I had a similar issue when using Emotion component.

The way I have solved this issue was setting focusInputOnSuggestionClick to false. The error disappeared. Focus logic can be implemented separately then.

[Xaugen]

Hey @mbulfair,

I had a similar issue when using Emotion component.

The way I have solved this issue was setting focusInputOnSuggestionClick to false. The error disappeared. Focus logic can be implemented separately then.

I have set innerRef and/or ref. None of them worked, but focusInputOnSuggestionClick. Thanks @piotrlo .