Skip to content

Commit

Permalink
Fix algolia search container bug
Browse files Browse the repository at this point in the history
  • Loading branch information
slorber committed May 23, 2024
1 parent b6644d8 commit 427daa1
Showing 1 changed file with 27 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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(
Expand All @@ -210,9 +211,9 @@ function DocSearch({

useDocSearchKeyboardEvents({
isOpen,
onOpen,
onClose,
onInput,
onOpen: openModal,
onClose: closeModal,
onInput: handleInput,
searchButtonRef,
});

Expand All @@ -233,7 +234,7 @@ function DocSearch({
onTouchStart={importDocSearchModalIfNeeded}
onFocus={importDocSearchModalIfNeeded}
onMouseOver={importDocSearchModalIfNeeded}
onClick={onOpen}
onClick={openModal}
ref={searchButtonRef}
translations={translations.button}
/>
Expand All @@ -243,7 +244,7 @@ function DocSearch({
searchContainer.current &&
createPortal(
<DocSearchModal
onClose={onClose}
onClose={closeModal}
initialScrollY={window.scrollY}
initialQuery={initialQuery}
navigator={navigator}
Expand Down

0 comments on commit 427daa1

Please sign in to comment.