How to focus on input with hotkey while using Autocomplete + React

[meotimdihia]

In this example:
https://codesandbox.io/s/red-monad-kjft55?file=/app.tsx

I want to use "Ctrl + K" to trigger a modal to search things. But it looks like the documentation doesn't mention this problem.

https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-react/

Please help me.

[dhayab]

Hi, you can use any hotkey library to listen to keyboard events and execute search.setIsOpen(true) (see API reference) in response.

[meotimdihia]

Hi, you can use any hotkey library to listen to keyboard events and execute search.setIsOpen(true) (see API reference) in response.

Thanks for replying, I tried it but it didn't work. This is the example - I forked from https://github.com/algolia/autocomplete/tree/next/examples/react-18 :

https://codesandbox.io/s/nice-leftpad-29tnxs?file=/src/App.tsx:2281-2502

Please try to press CTRL + K in the demo.

Screen.Recording.2023-09-07.at.15.43.47.mov

[dhayab]

In detached mode you need to specify openOnFocus: true as well. This should keep the detached panel open.

[meotimdihia]

Thanks :)