React-autosuggest: Set focus from external events

[dmsnell]

Thanks for building this great component!

While incorporating this input field into my app I ran into the trouble that I was unable to figure out how to manually set the focus on the input box. That is to say, how can I have a parent React component set the focus?

Use Case?

We have a list of tags with the auto-suggester. Inputting new tags works fine and returns focus to the text entry after selecting a suggestion. However, we want to be able to click on one of the existing tags, remove that tag, and return input focus to the auto-suggester. This is the piece I can't seem to figure out.

If there were some way to set focus from an external event that would be great. I realize that this could be hard since we don't have access to the underlying input DOM node.

Example

saveInput( ref ) {
    this.input = ref;
}

focusInput() {
    if ( ! this.input ) { return }

    this.input.focus();
}

<Autosuggest inputRef={ this.saveInput } />
<Button onClick={ this.focusInput } />

Thanks!

[moroshko]

I realize that this could be hard since we don't have access to the underlying input DOM node.

Does this help?

[dmsnell]

Does this help?

Yes! Thanks so much for your response @moroshko - and I apologize for not finding that earlier.