import { autocomplete } from '@algolia/autocomplete-js';
import React, { createElement, Fragment, useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import '@algolia/autocomplete-theme-classic/dist/theme.css';
export function AutoComplete(props) {
const containerRef = useRef(null);
const panelRootRef = useRef(null);
const rootRef = useRef(null);
useEffect(() => {
if (!containerRef.current) {
return;
}
const search = autocomplete({
container: containerRef.current,
renderer: { createElement, Fragment,
render : () => {},
},
render({ children }, root) {
if (!panelRootRef.current || rootRef.current !== root) {
rootRef.current = root;
panelRootRef.current?.unmount();
panelRootRef.current = createRoot(root);
}
panelRootRef.current.render(children);
},
...props,
});
return () => search.destroy();
}, [props]);
return <div ref={containerRef} />;
}
export default AutoComplete;
<Autocomplete
placeholder=“Search for courses…”
plugins={plugins}
// initialState={initialState}
onReset={onReset}
insights={true}
onSubmit={onSubmit}
openOnFocus
autofocus
/>
I am using these two components in react 18 and the autocomplete feature is working but when I am loosing focus by taping or clicking any where outside then the panel container is not hidding and still it’s visible.
Please help on this.