react: manually force focus of autocomplete?

[RyKilleen]

TL;DR

Is there a way to manually force autocomplete to set focus on the search input and open a panel?

Either through the API or refs and DOM events? Any insight you might provide is appreciated!

---

I'm successfully using an instance of autocomplete with React, per the official guide.

Because of circumstances, I have the need to manually force autocomplete to focus the input and show the panel. In my case, openOnFocus and autoFocus won't suffice.

Circumstances

This is inside of a Tauri App, which is using a webview that's hidden and shown via Rust. As far as the autocomplete component is concerned, it's being rendered once and then a window is minimized or expanded. This is why autoFocus won't suffice.

[dhayab]

Hi @RyKilleen, there is currently no way to set focus through the API returned by autocomplete().

Activating focus on the search input by directly calling the focus() method of its DOM element should work.

[RyKilleen]

This was my original direction and I'll try to pursue it further. Is there any guidance on what selector to call in that instance?

I couldn't manage to make this approach work, but it was pretty late 😄

[dhayab]

Sure! You can target .aa-Input. Here's a sandbox setting focus as a side effect: https://codesandbox.io/s/infallible-danilo-j70fjo?file=/src/App.tsx.

[RyKilleen]

Thank you for confirming that approach should work! That led me to realize the component was in detachedMode because of the default media query. Much appreciated!