How can I focus on an element within an imported React component?

Question

I'm importing React-Search-Input and would like to programmatically focus on the text input contained within the component, but it contains no refs and no method to focus on the input.

So because of that, running .focus() on the element, doesn't focus on what I need, which is the text input within the component. It instead focuses on a container element.

Do I have any options here besides forking the project? Thanks!

Answer 1

You can use ReactDOM.findDOMNode to retrieve the element and then call focus on the first child. Something like this:

componentDidMount() {
    ReactDOM.findDOMNode(this.searchInput).firstChild.focus();
}

and then render...

<SearchInput
    className="search-input"
    onChange={this.searchUpdated}
    ref={(ref) => this.searchInput = ref}
/>