docsearch icon indicating copy to clipboard operation
docsearch copied to clipboard

Can the shortcut keys be modified through configuration?

Open Red-Asuka opened this issue 1 year ago • 7 comments

Describe the problem

My website uses Algolia search and it works well. I also use an AI assistant on the website, and I found that when users input '/', it opens the Algolia search box. It seems to be a shortcut key conflict. Is there any way to disable the '/' shortcut key or can I assign it to another shortcut key?

Describe the solution

Provide a configuration that can modify shortcut keys, such as openShortcutKey: '/'.

Alternatives you've considered

Or, it can control the validity of shortcut keys through coding, and in some cases, it can temporarily disable shortcut keys.

Red-Asuka avatar Dec 20 '23 01:12 Red-Asuka

DocSearch depends on Autocomplete which cannot be changed unless you create a custom renderer: https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/.

randombeeper avatar Jul 10 '24 21:07 randombeeper

We run into this issue as well. Any progress @Red-Asuka ?

DocSearch depends on Autocomplete which cannot be changed unless you create a custom renderer: algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer.

@randombeeper how does the Autocomplete relate to this problem and why the proposed fix has been rejected?

gpbl avatar Apr 07 '25 10:04 gpbl

@gpbl I was just stating above that the out of the box DocSearch UI is based on Autocomplete and that if the person wanted to do it themselves that could potentially be a way.

As for the proposed fix that you referenced, that may be a possible fix, but it seems it was closed by the submitter before we could evaluate it.

Having said all that, I'm aware of a few cases of this scenario now and will mark it for review with engineering.

randombeeper avatar Apr 07 '25 21:04 randombeeper

@gpbl I resolved this issue by preventing the propagation of keyboard events for other dialogs. Here’s the code snippet I used:

aiDialog.addEventListener('keydown', (event) => {
  // Check if cmd/ctrl + k or / is pressed
  if(((event.metaKey || event.ctrlKey) && event.key === 'k')  || event.key === '/') { 
    event.stopPropagation();
  }
});

Red-Asuka avatar Apr 08 '25 06:04 Red-Asuka

Thanks @randombeeper for your response! I am using the search in a Docusaurus project and I was expecting to configure this behavior from the settings passed to Algolia there.

My use case is an input field in the page https://daypicker.dev/guides/input-fields - when a user types /, it triggers the search dialog.

gpbl avatar Apr 08 '25 09:04 gpbl

Is it possible that this PR has fixed either of your issues? https://github.com/algolia/docsearch/pull/2212

randombeeper avatar Apr 08 '25 18:04 randombeeper

Is it possible that this PR has fixed either of your issues? #2212

It could be as I'm in the same case of a Shadow DOM. Being a nested dependency from Docusaurus, not sure when I will see this on my website: I could fix it preventing the event to bubble when typing into the field. Thanks for the support!

gpbl avatar Apr 19 '25 11:04 gpbl