3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-07 05:12:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(search): fix algolia search container bug (#10164)

Browse source
This commit is contained in:
Sébastien Lorber 2024-05-23 12:35:19 +02:00 • committed by GitHub
parent b6644d836b
commit 0ce7c1303c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 27 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

53
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx
View file

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