React-autosuggest: Force dropdown to open

[mauriciosoares]

Hey!

Is there a way I can force the drowdown to open with the latest suggestions filled, without having to focus on the input?

My idea is to set the focus on the callback of another event...

Thanks!

[moroshko]

Yeah, setting the focus programatically should do the trick.

[mauriciosoares]

I see, I'll do some tests then...

I'll tell you later if I succeeded :)

Thanks

[mauriciosoares]

worked like a charm! thanks @moroshko

[dannybloe]

Maybe a silly question but how can I achieve this? I use the component as a combobox with a tiny arrows button superimposed on the component. I want to toggle the suggestions panel when the user clicks this button (similar to a select element). I'm not sure how to achieve this.

[mauriciosoares]

@dannybloe To be honest it's been a while since I've done it, and I'm not 100% sure the answer I'll give you is the correct one... But the idea is set a ref in the AutoSuggest component, and get the input DOM reference and triggering .focus() on it

<AutoSuggest ref="suggest" />


this.refs.suggest.getElementsByTagName('input')[0].focus()

That might do the trick

[moroshko]

@dannybloe Something like this?

[dannybloe]

Ah, almost. I'd like the button to behave as a toggle: when it is expanded, it should collapse and vice-versa. I can't find a way to close the suggestions container.

[moroshko]

@dannybloe Does this help?

[dannybloe]

YES!! Thanks. You rock!
Maybe an idea to expose a method on the control to do this? Or something like this?

[moroshko]

I'll think about this.