[Question] How to use "ref" to access the DOM when using styled.

I have a case where I click on a toggle <Button />, then I need to focus the <Input />.

The <Input /> is a component made with styled-component v2.

I have the following code in the Component :

  componentDidUpdate() {
    if (this.search) {
      this.search.getDOMNode().focus();
    }
  }

  render() {
    return (
      <div className="input-group">
        <div className="input-group-add-on"><Fa search /></div>
        <Input ref={(search) => { this.search = search }} type="text" name="search" placeholder="$btn-primary"/>
      </div>
    )
  }

I have the following error:

 this.search.getDOMNode is not a function

After some inspection, it appear I can’t use this with styled. What is the recommended way to deal with this issue ?

Version

2.0.0-8

[k15a]

You hav to use innerRef instead ref

[kopax]

I have changed to

  componentDidUpdate() {
    if (this.search) {
      this.search.focus();
    }
  }

and

   <Input innerRef={(search) => { this.search = search }} type="text" name="search" placeholder="$btn-primary"/>

And I still have not access to my element :

 this.search.focus is not a function

@k15a Why is that?