From d6510b63aee117a569d561fa478ada5c667d574a Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn <lex61rus@gmail.com> Date: Mon, 8 Feb 2021 17:57:03 +0300 Subject: [PATCH] fix(v2): prepend docsearch modal to body element (#4188) --- .../src/theme/SearchBar/index.js | 9 ++++++++- .../src/theme/SearchBar/styles.css | 4 ++++ 2 files changed, 12 insertions(+), 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 index c3d6f557442f..6cd6ea993fad 100644 --- 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 index c1b6c743b300..e57bb046de21 100644 --- 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); +}