diff --git a/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx index edf11c1c5..bd9ba9cb5 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx @@ -2,7 +2,6 @@ import { cx } from "class-variance-authority" import NextLink from "next/link" -import { useRouter } from "next/navigation" import { useCallback, useEffect, @@ -32,7 +31,6 @@ interface TabNavigationProps { export default function TabNavigation({ pageSections }: TabNavigationProps) { const [activeHash, setActiveHash] = useState() - const router = useRouter() const tabNavigationRef = useRef(null) const tabRefs = useMemo(() => new Map(), []) const tabLinks = Object.values(pageSections).map(({ hash }) => hash) @@ -85,10 +83,13 @@ export default function TabNavigation({ pageSections }: TabNavigationProps) { useEffect(() => { if (activeSectionId) { - router.replace(`#${activeSectionId}`, { scroll: false }) + const url = new URL(window.location.href) + url.hash = activeSectionId + window.history.replaceState(null, "", url.toString()) + setActiveHash(activeSectionId) } - }, [activeSectionId, router]) + }, [activeSectionId]) return (
{ + onClick={(e) => { + // Prevent default anchor behavior as it doesn't work well with query params + // and to ensure smooth scrolling works correctly + e.preventDefault() pauseScrollSpy() setActiveHash(hash) trackHotelTabClick(heading) + const url = new URL(window.location.href) + url.hash = hash + window.history.pushState(null, "", url.toString()) + + // Manually scroll to the element with that ID + const element = document.getElementById(hash) + if (element) { + element.scrollIntoView({ behavior: "smooth" }) + } }} > {heading}