Autocomplete closing modal

Open Q&A
,
#1

Hi! I have a question concerning autocomplete inside a popover modal. I’m implementing a system wherein a user can search in an autocomplete box in an index, and since I want to do some custom rendering once an item is selected, I have a local state monitoring what the user has selected. However, when the user selects something from the autocomplete, it closes both the panel and the underlying modal. Is there a way to prevent the entire underlying modal from closing while still preserving the functionality of closing the panel?

Relevant bits of code:

    if (!containerRef.current) {
      return undefined
    }

    const search = autocomplete<Hit<T>>({
      classNames: {
        panel: "z-20",
        panelLayout: "!p-0",
        form: "!rounded !rounded-4 !h-10 border !shadow-none focus-within:!ring-1 !border-gray-200 dark:!border-gray-600 invalid:!border-red-400 focus-within:!border-cobalt-400 focus-within:!ring-cobalt-400 disabled:!border-gray-200 dark:!bg-gray-800 dark:invalid:!border-red-900 dark:focus-within:!border-cobalt-300 dark:focus-within:!ring-cobalt-300 dark:disabled:!border-gray-600 dark:disabled:!bg-gray-700 ",
        input:
          "!text-gray-600 placeholder:!text-gray-600 !text-base focus-within:!text-black disabled:!text-gray-500 dark:!text-gray-200 dark:placeholder:!text-gray-200  dark:focus-within:!text-white dark:disabled:!text-gray-300",
        inputWrapperPrefix: "!stroke-gray-600",
      },
      renderer: { createElement, Fragment },
      render({ children }, root) {
        render(children as ReactElement, root)
      },
      container: containerRef.current,
      placeholder,
      getSources<T>({ query }) {
        if (!query) {
          return []
        }

        return [
          {
            sourceId: "products",
            getItems() {
              return getAlgoliaResults<T>({
                searchClient: getAlgoliaSearchClient(),
                queries: [
                  {
                    indexName: indexName,
                    query,
                    params: {
                      filters: filters,
                      attributesToSnippet: ["name:10"],
                      snippetEllipsisText: "…",
                    },
                  },
                ],
              })
            },
            templates: {
              item({ item }) {
                return <div>{renderItem(item)}</div>
              },
            },
          },
        ]
      },
    })
    return () => {
      search.destroy()
    }
  }, [filters, placeholder, indexName, renderItem])

  return <div className={className} ref={containerRef} />

In a different file:

<Modal {...modalProps}>
<DynamicAutocompleteWithNoSSR
                indexName={...}
                renderItem={...}
                placeholder="Search products"
              />
</Modal>

And finally in the file that contains the structure for the modal, which is open when a specific query on the route exists: