diff --git a/.changeset/all-doors-sing.md b/.changeset/all-doors-sing.md new file mode 100644 index 00000000000..c6e02eb4f18 --- /dev/null +++ b/.changeset/all-doors-sing.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fix browser back / forward navigation for tabs diff --git a/packages/clerk-js/src/ui/hooks/useTabState.ts b/packages/clerk-js/src/ui/hooks/useTabState.ts index e6706058f0f..ddaef03d384 100644 --- a/packages/clerk-js/src/ui/hooks/useTabState.ts +++ b/packages/clerk-js/src/ui/hooks/useTabState.ts @@ -1,4 +1,4 @@ -import React from 'react'; +import { useEffect, useState } from 'react'; import { useRouter } from '../router'; @@ -15,7 +15,15 @@ export const useTabState = (tabMap: TabMap, defaultTab = 0) => { return tabIndex ? parseInt(tabIndex, 10) : defaultTab; }; - const [selectedTab, setSelectedTab] = React.useState(getInitialTab()); + const [selectedTab, setSelectedTab] = useState(getInitialTab()); + + // Listen for URL changes (browser back/forward) + useEffect(() => { + const currentTab = getInitialTab(); + if (currentTab !== selectedTab) { + setSelectedTab(currentTab); + } + }, [router.queryParams.tab]); const handleTabChange = (index: number) => { setSelectedTab(index);