fix(v2): prepend docsearch modal to body element

facebook · Feb 7, 2021 · 8fde69e · 8fde69e
1 parent 5871d1b
commit 8fde69e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -53,6 +53,7 @@ function DocSearch({contextualSearch, ...props}) {
 
   const {withBaseUrl} = useBaseUrlUtils();
   const history = useHistory();
+  const searchContainer = useRef(null);
   const searchButtonRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const [initialQuery, setInitialQuery] = useState(null);
@@ -73,12 +74,18 @@ function DocSearch({contextualSearch, ...props}) {
 
   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(() => {
     setIsOpen(false);
+    searchContainer.current.remove();
   }, [setIsOpen]);
 
   const onInput = useCallback(
@@ -172,7 +179,7 @@ function DocSearch({contextualSearch, ...props}) {
             {...props}
             searchParameters={searchParameters}
           />,
-          document.body,
+          searchContainer.current,
         )}
     </>
   );

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
@@ -14,3 +14,7 @@
   transition: all var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
 }
+
+.DocSearch-Container {
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+}