React-autosuggest: How can I focus the input field?

[goddyZhao]

Here is my case:

I open the auto suggestion component in a popup and I want to auto focus the input field after it is shown

But since the input element is handled by the component internally, what I can do is just use document.querySelector to query the input element and focus it. It works but it is not an elegant way. So is it possible to do that with the component like passing a auto focus parameter to make it?

[moroshko]

Does this help?

[goddyZhao]

Thanks @moroshko , this works and makes more sense, thanks so much!

[JemarJones]

Having the same issue. It doesn't look like the above works anymore, as i'm not able to get access to any input field as shown.

[moroshko]

@JemarJones

It doesn't look like the above works anymore

What do you mean by "doesn't work"? (I assume you are referring to this Codepen)

[JemarJones]

@moroshko My apologies, we use a wrapper of autosuggest and i placed the ref on that instead of the actual autosuggest component by accident. There's no issue, it works as you have shown!

[andrewg4]

Why don't you just add autoFocus: true prop to the inputProps. For example:
const inputProps = { placeholder: 'Type here to start search...', value, onChange: this.onChange, autoFocus: true };

[eldyvoon]

@moroshko http://codepen.io/moroshko/pen/WryOMP?editors=0110 doesn't show anything.