diff --git a/.changeset/toolbar-tabs-static-navigation.md b/.changeset/toolbar-tabs-static-navigation.md new file mode 100644 index 0000000000..637057f7cf --- /dev/null +++ b/.changeset/toolbar-tabs-static-navigation.md @@ -0,0 +1,6 @@ +--- +'@react-email/ui': patch +'react-email': patch +--- + +Fixed toolbar tabs not responding on statically built previews when the page was opened with a `toolbar-panel` query param in the URL. diff --git a/packages/ui/src/components/toolbar.tsx b/packages/ui/src/components/toolbar.tsx index f0df7fb636..ec87e202bc 100644 --- a/packages/ui/src/components/toolbar.tsx +++ b/packages/ui/src/components/toolbar.tsx @@ -2,7 +2,7 @@ import * as Tabs from '@radix-ui/react-tabs'; import { LayoutGroup } from 'framer-motion'; -import { usePathname, useRouter, useSearchParams } from 'next/navigation'; +import { usePathname, useSearchParams } from 'next/navigation'; import type { ComponentProps } from 'react'; import * as React from 'react'; import { nicenames } from '../actions/email-validation/caniemail-data'; @@ -72,7 +72,6 @@ const ToolbarInner = ({ }) => { const pathname = usePathname(); const searchParams = useSearchParams(); - const router = useRouter(); const { hasSetupResendIntegration } = useToolbarContext(); @@ -89,7 +88,13 @@ const ToolbarInner = ({ } else { params.set('toolbar-panel', newValue); } - router.push(`${pathname}?${params.toString()}${location.hash}`); + // Not router.push: on static builds it silently no-ops for query-only + // navigation when the page was loaded with a query param. + window.history.pushState( + null, + '', + `${pathname}?${params.toString()}${location.hash}`, + ); }; const [cachedSpamCheckingResult, setCachedSpamCheckingResult] =