The focus works incorrect, when you add autosuggest

[safiullin-at]

Try to add react-autosuggest according example and you will see the focus on input tag works incorrect. Try to to click on the component outside input tag, then you can see the css focus class adds normally, but input tag has no focus. In case when you add react-autosuggest, the input tag is wrapped by one more block and as a consequance it doesn't work.

[liitfr]

has anybody got a workaround for this issue ? any suggestion would be very welcome ! Thanks mates

[mykter]

From what I can see this.input.focus() isn't being called. It's not clear to me whether this.input is meant to be a ref to the Autosuggest component or to the input element within it.

[mykter]

Ah think I've cracked it, in the example given the ref ends up pointing to the Autosuggest component, when it should be to the Autosuggest's input component. Here is the relevant bit from the current example:

  return (
    <Autosuggest
      ref={props.ref}

and here is what works for me:

    const storeInputReference = autosuggest => {
      if (autosuggest !== null) {
        props.ref(autosuggest.input);
      }
    };

    return (
      <Autosuggest
        ref={storeInputReference}

So instead of just passing the ref function through to Autosuggest, we wrap it so the input component gets passed back up instead of the Autosuggest component.

[aaronbeall]

@mykter Thanks, this fixed it for me!

(I had also tried <Autosuggest inputProps={{ ref: props.ref }}> but that didn't work.)

I think this should be added to the documentation/example. It's a pretty glaring problem IMO but with an easy solution once you know it.

[mr-devboy]

@mykter YOU SAVE MY TIME! THANK YOU

[nvh95]

Thank you @mykter. It worked perfectly for me. I think we should create a PR to update the example and README.

[mykter]

@nvh95 you're welcome. I don't think this component is being maintained though - the last commit was ~2 years ago.