'input.focus is not a function' when using a custom component as the input.

codepen http://codepen.io/dancoates/pen/JErmeO?editors=0010

steps to replicate

enter something in autosuggest box
select item from the list by clicking on it
there will be an error in the console along the lines of ‘input.focus is not a function’

This seems to happen when using a custom renderInputComponent function that returns a custom input component. It doesn’t seem to actually break the autosuggest but doesn’t focus the input and may cause subtle issues that I haven’t noticed yet.

Issue Analytics

State:
Created 7 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

10reactions

danieluhlcommented, Jun 21, 2017

Above is correct, I wanted to give an example using a custom component:

  const renderInputComponent = inputProps => {
    return <TextInput {...inputProps} refCallback={inputProps.ref} ref={null} />;
  };
  ...
  render() {
    return <Autosuggest renderInputComponent={props.renderedInputComponent} {...props} />
  }
  ...
  TextInput = props => <div><input ref={props.refCallback} /></div>;

The trick here is ref={null} otherwise the autosuggest input gets set twice, first to the input then to the TextInput component - and focus blows up.

3reactions

nathanbirrellcommented, Sep 12, 2018

A note for styled-components users who stumble across this. You can’t spread the inputProps, since the inputProps contains a ref attribute that, in styled-components, needs to be innerRef. Do something along these lines:

innerRef={inputProps.ref}