Custom trigger button

[vnugent]

Use case

I want to build a "click to tag a product" button that will activate AA in detached mode.
How do you customize the trigger component in detached mode?

Current behavior

When in detached mode, the default trigger component is an HTML button that looks like a search box. I want to replace this button with my own.

---

[dhayab]

Hi, you can use the setIsOpen() state setter, returned by autocomplete(), to programmaticaly open the detached panel. For this to work correctly you'll also need to configure autocomplete with openOnFocus: true.

const { setIsOpen } = autocomplete({
  // ...
  openOnFocus: true,
});

/* ... */

tagBtn.addEventListener('click', () => {
  setIsOpen(true);
});

[vnugent]

@dhayab thanks for your help. I can programmatically trigger the search in detached mode. However, the default trigger button is still being rendered. How do I hide it or replace it with my own component?

PS: My component is nearly identical to the React 18 sample code.

[dhayab]

There is not built-in way to replace the detached search button with your own component. You can safely hide it with CSS.

[vnugent]

Sharing my solution

Autocomplete component. See https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-react/#with-react-18

   ...
    search = autocomplete({
      openOnFocus: true,
      classNames: {{  detachedSearchButton: 'hidden-aa-btn' }}
     ...
     )

custom tailwind css file:

  .hidden-aa-btn {
      @apply hidden !important;
   }

[solace]

For reference, if you're using tailwind, you can apply the tailwind classes directly to classNames as well.

Instead of hiding the whole button, I just restyled what I needed. This allows me to just have a button with the icon where I need it to trigger the modal. Replace with custom classes if you prefer.

classNames: {
    detachedSearchButton: 'border-0 [&_*]:cursor-pointer outline-none focus:shadow-none',
    detachedSearchButtonIcon: '[&>svg]:h-4 [&>svg]:w-4',
    detachedSearchButtonPlaceholder: 'sr-only',
    detachedSearchButtonQuery: 'hidden'
},