@docusaurus/theme-search-algolia 0.0.0-5953 → 0.0.0-5955

package/lib/theme/SearchBar/index.js

@@ -73,29 +73,29 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
       DocSearchModal = Modal;
     });
   }, []);
-  const onOpen = useCallback(() => {
-    importDocSearchModalIfNeeded().then(() => {
-      searchContainer.current = document.createElement('div');
-      document.body.insertBefore(
-        searchContainer.current,
-        document.body.firstChild,
-      );
-      setIsOpen(true);
-    });
-  }, [importDocSearchModalIfNeeded, setIsOpen]);
-  const onClose = useCallback(() => {
+  const prepareSearchContainer = useCallback(() => {
+    if (!searchContainer.current) {
+      const divElement = document.createElement('div');
+      searchContainer.current = divElement;
+      document.body.insertBefore(divElement, document.body.firstChild);
+    }
+  }, []);
+  const openModal = useCallback(() => {
+    prepareSearchContainer();
+    importDocSearchModalIfNeeded().then(() => setIsOpen(true));
+  }, [importDocSearchModalIfNeeded, prepareSearchContainer]);
+  const closeModal = useCallback(() => {
     setIsOpen(false);
-    searchContainer.current?.remove();
     searchButtonRef.current?.focus();
-  }, [setIsOpen]);
-  const onInput = useCallback(
+  }, []);
+  const handleInput = useCallback(
     (event) => {
-      importDocSearchModalIfNeeded().then(() => {
-        setIsOpen(true);
-        setInitialQuery(event.key);
-      });
+      // prevents duplicate key insertion in the modal input
+      event.preventDefault();
+      setInitialQuery(event.key);
+      openModal();
     },
-    [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
+    [openModal],
   );
   const navigator = useRef({
     navigate({itemUrl}) {
@@ -122,8 +122,8 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
     () =>
       // eslint-disable-next-line react/no-unstable-nested-components
       (footerProps) =>
-        <ResultsFooter {...footerProps} onClose={onClose} />,
-    [onClose],
+        <ResultsFooter {...footerProps} onClose={closeModal} />,
+    [closeModal],
   );
   const transformSearchClient = useCallback(
     (searchClient) => {
@@ -137,9 +137,9 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
   );
   useDocSearchKeyboardEvents({
     isOpen,
-    onOpen,
-    onClose,
-    onInput,
+    onOpen: openModal,
+    onClose: closeModal,
+    onInput: handleInput,
     searchButtonRef,
   });
   return (
@@ -159,7 +159,7 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
         onTouchStart={importDocSearchModalIfNeeded}
         onFocus={importDocSearchModalIfNeeded}
         onMouseOver={importDocSearchModalIfNeeded}
-        onClick={onOpen}
+        onClick={openModal}
         ref={searchButtonRef}
         translations={translations.button}
       />
@@ -169,7 +169,7 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
         searchContainer.current &&
         createPortal(
           <DocSearchModal
-            onClose={onClose}
+            onClose={closeModal}
             initialScrollY={window.scrollY}
             initialQuery={initialQuery}
             navigator={navigator}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-search-algolia",
-  "version": "0.0.0-5953",
+  "version": "0.0.0-5955",
   "description": "Algolia search component for Docusaurus.",
   "main": "lib/index.js",
   "sideEffects": [
@@ -34,13 +34,13 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.5.2",
-    "@docusaurus/core": "0.0.0-5953",
-    "@docusaurus/logger": "0.0.0-5953",
-    "@docusaurus/plugin-content-docs": "0.0.0-5953",
-    "@docusaurus/theme-common": "0.0.0-5953",
-    "@docusaurus/theme-translations": "0.0.0-5953",
-    "@docusaurus/utils": "0.0.0-5953",
-    "@docusaurus/utils-validation": "0.0.0-5953",
+    "@docusaurus/core": "0.0.0-5955",
+    "@docusaurus/logger": "0.0.0-5955",
+    "@docusaurus/plugin-content-docs": "0.0.0-5955",
+    "@docusaurus/theme-common": "0.0.0-5955",
+    "@docusaurus/theme-translations": "0.0.0-5955",
+    "@docusaurus/utils": "0.0.0-5955",
+    "@docusaurus/utils-validation": "0.0.0-5955",
     "algoliasearch": "^4.18.0",
     "algoliasearch-helper": "^3.13.3",
     "clsx": "^2.0.0",
@@ -51,7 +51,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-5953"
+    "@docusaurus/module-type-aliases": "0.0.0-5955"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "dcfda109529e5e3bd7e1360fcc421e243d7e569b"
+  "gitHead": "c8e95ee9d05bde7247861eda7582356a97a0d5ef"
 }

package/src/theme/SearchBar/index.tsx

@@ -136,31 +136,32 @@ function DocSearch({
     });
   }, []);
 
-  const onOpen = useCallback(() => {
-    importDocSearchModalIfNeeded().then(() => {
-      searchContainer.current = document.createElement('div');
-      document.body.insertBefore(
-        searchContainer.current,
-        document.body.firstChild,
-      );
-      setIsOpen(true);
-    });
-  }, [importDocSearchModalIfNeeded, setIsOpen]);
+  const prepareSearchContainer = useCallback(() => {
+    if (!searchContainer.current) {
+      const divElement = document.createElement('div');
+      searchContainer.current = divElement;
+      document.body.insertBefore(divElement, document.body.firstChild);
+    }
+  }, []);
+
+  const openModal = useCallback(() => {
+    prepareSearchContainer();
+    importDocSearchModalIfNeeded().then(() => setIsOpen(true));
+  }, [importDocSearchModalIfNeeded, prepareSearchContainer]);
 
-  const onClose = useCallback(() => {
+  const closeModal = useCallback(() => {
     setIsOpen(false);
-    searchContainer.current?.remove();
     searchButtonRef.current?.focus();
-  }, [setIsOpen]);
+  }, []);
 
-  const onInput = useCallback(
+  const handleInput = useCallback(
     (event: KeyboardEvent) => {
-      importDocSearchModalIfNeeded().then(() => {
-        setIsOpen(true);
-        setInitialQuery(event.key);
-      });
+      // prevents duplicate key insertion in the modal input
+      event.preventDefault();
+      setInitialQuery(event.key);
+      openModal();
     },
-    [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
+    [openModal],
   );
 
   const navigator = useRef({
@@ -192,8 +193,8 @@ function DocSearch({
       () =>
         // eslint-disable-next-line react/no-unstable-nested-components
         (footerProps: Omit<ResultsFooterProps, 'onClose'>): JSX.Element =>
-          <ResultsFooter {...footerProps} onClose={onClose} />,
-      [onClose],
+          <ResultsFooter {...footerProps} onClose={closeModal} />,
+      [closeModal],
     );
 
   const transformSearchClient = useCallback(
@@ -210,9 +211,9 @@ function DocSearch({
 
   useDocSearchKeyboardEvents({
     isOpen,
-    onOpen,
-    onClose,
-    onInput,
+    onOpen: openModal,
+    onClose: closeModal,
+    onInput: handleInput,
     searchButtonRef,
   });
 
@@ -233,7 +234,7 @@ function DocSearch({
         onTouchStart={importDocSearchModalIfNeeded}
         onFocus={importDocSearchModalIfNeeded}
         onMouseOver={importDocSearchModalIfNeeded}
-        onClick={onOpen}
+        onClick={openModal}
         ref={searchButtonRef}
         translations={translations.button}
       />
@@ -243,7 +244,7 @@ function DocSearch({
         searchContainer.current &&
         createPortal(
           <DocSearchModal
-            onClose={onClose}
+            onClose={closeModal}
             initialScrollY={window.scrollY}
             initialQuery={initialQuery}
             navigator={navigator}