From 11a747977e7a7bda9a5961c37f117b3ab61409ab Mon Sep 17 00:00:00 2001 From: Rami Zackary Shamir Date: Wed, 10 Apr 2024 10:01:08 -0400 Subject: [PATCH 1/5] Fixes #6693: fixes search functionality on iOS devices (#6743) * change isOpen variable in TopNav component to isMenuOpen to differentiate from isOpen props in Search component change setIsOpen to setIsMenuOpen in TopNav component * move initialization of ShowSearch state to top-level of TopNav component organize hook initializations in TopNav component: useState, useRef, useRouter * remove initialYScroll prop from DocSearchModal component to fix search functionality on ios devices --- src/components/Layout/TopNav/TopNav.tsx | 32 ++++++++++++------------- src/components/Search.tsx | 1 - 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index b6e276ff70..440664e435 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -142,10 +142,11 @@ export default function TopNav({ breadcrumbs: RouteItem[]; section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown'; }) { - const [isOpen, setIsOpen] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [showSearch, setShowSearch] = useState(false); + const [isScrolled, setIsScrolled] = useState(false); const scrollParentRef = useRef(null); const {asPath} = useRouter(); - const [isScrolled, setIsScrolled] = useState(false); // HACK. Fix up the data structures instead. if ((routeTree as any).routes.length === 1) { @@ -154,18 +155,18 @@ export default function TopNav({ // While the overlay is open, disable body scroll. useEffect(() => { - if (isOpen) { + if (isMenuOpen) { const preferredScrollParent = scrollParentRef.current!; disableBodyScroll(preferredScrollParent); return () => enableBodyScroll(preferredScrollParent); } else { return undefined; } - }, [isOpen]); + }, [isMenuOpen]); // Close the overlay on any navigation. useEffect(() => { - setIsOpen(false); + setIsMenuOpen(false); }, [asPath]); // Also close the overlay if the window gets resized past mobile layout. @@ -175,7 +176,7 @@ export default function TopNav({ function closeIfNeeded() { if (!media.matches) { - setIsOpen(false); + setIsMenuOpen(false); } } @@ -204,7 +205,6 @@ export default function TopNav({ return () => observer.disconnect(); }, []); - const [showSearch, setShowSearch] = useState(false); const onOpenSearch = useCallback(() => { startTransition(() => { setShowSearch(true); @@ -224,28 +224,28 @@ export default function TopNav({
- {isOpen && ( + {isMenuOpen && (