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

[jchapelle]

I've been giving react-autosuggest a try yesterday. It is great !
I encounter a small problem however. When clicking a suggestion, everything works fine except the focus on the input. I receive this message in console ::

_this3.input.focus not a function

When I set focusInputOnSuggestionClick to false, I don't have the message obvisouly.

My input is customized via the "renderInputComponent" and return a bootstrap FormControl.
I've tried replacing the FormControl by a simple input element but this gives me the same error.

const renderInputComponent = inputProps => (
  <FormControlResized type="text" {...inputProps}/>
);

[moroshko]

See https://github.com/moroshko/react-autosuggest/issues/318#issuecomment-275545594

[jchapelle]

Thanks. In fact, when using your suggestion it works without any error.

class InputComponent extends React.Component {
  render() {
    return <div><input {...this.props.inputProps} /></div>;
  }
}

However, when styling my input with styled-components library, I still get the error. Do you know why ?

const Input = styled.input`
    height: inherit!important;
    border-radius: 0px!important;
    width: 100%;
    background-color: white;
`;

class InputComponent extends React.Component {
  render() {
    return <div><Input {...this.props.inputProps} /></div>;
  }
}

[moroshko]

It's the same problem. Input swallows inputProps.ref.
You need to make sure that inputProps.ref gets all the way down to the underlying <input> element.

[jchapelle]

Ok thanks

On Fri, Jun 2, 2017 at 7:26 PM, Misha Moroshko [e-mail]
wrote:

It's the same problem. Input swallows inputProps.ref.
You need to make sure that inputProps.ref gets all the way down to the
underlying element.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/moroshko/react-autosuggest/issues/377#issuecomment-305858038,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF4GXW_PthkaYWU8CfcpOaeWSqb5nFZBks5sAEXYgaJpZM4Nt6XX
.

--
Jean Chapelle

[simb4]

@moroshko is there any way to do the same trick with material-ui/TextField? Thanks.

[fabioDMFerreira]

@simb4 Did you find some solution to TextField component?

[andyford]

This was driving me bonkers.

In the styled-components 3.x docs they mention using 'innerRef' to pass a ref

so I tried:

const renderInputComponent = (inputProps) => {
    return <StyledInput {...inputProps} innerRef={inputProps.ref} />;
};

...but that still threw errors.

What DOES seem to work is to destructure ref from the rest of the props:

const renderInputComponent = (inputProps) => {
    const { ref, ...otherProps } = inputProps;
    return <StyledInput {...otherProps} innerRef={ref} />;
};

EDIT: note that the styled components 4.x tips and tricks doc says to use 'ref' rather than innerRef.

[dcworldwide]

Also having issues finding a solution with material-ui/TextField? Thanks.

[phacks]

For anybody having issues with @material-ui/TextField, the solution that worked for me was this combination of props for the TextField component returned by renderInputComponent:

<TextField
  {...inputProps}
  ref={null}
  inputRef={inputProps.ref}
/>

Rationale:

• inputRef, as stated by the Material UI docs “can be used to pass a ref to the input element.”
• ref={null} is there to prevent the TextField from swallowing the ref of inputProps, which must be passed to the underlying input element

Hope this helps!

[harshbhandari7]

I am using Field component of 'redux-form' for Input field. Which prop is used for the passing the inputProps.ref in Field Component?
<Field name="notes" type="textarea" component={renderField} refCallback={inputProps.ref} ref={null} {...props} />

Thanks