docs: fix runtime error occuring with code tabs (#13873)

This commit is contained in:
Shahed Nasser authored and GitHub committed 2025-10-27 17:52:42 +02:00
1 parent 9f154c308e
commit 39f2893738
1 file changed
+7 -4
@@ -175,7 +175,7 @@ export const CodeTabs = ({
group, group,
}) })
const tabRefs: (HTMLButtonElement | null)[] = useMemo(() => [], []) const tabRefs = useRef<(HTMLButtonElement | null)[]>([])
const codeTabSelectorRef = useRef<HTMLSpanElement | null>(null) const codeTabSelectorRef = useRef<HTMLSpanElement | null>(null)
const codeTabsWrapperRef = useRef<HTMLDivElement | null>(null) const codeTabsWrapperRef = useRef<HTMLDivElement | null>(null)
@@ -221,8 +221,8 @@ export const CodeTabs = ({
) )
useEffect(() => { useEffect(() => {
if (codeTabSelectorRef?.current && tabRefs.length) { if (codeTabSelectorRef?.current && tabRefs.current.length) {
const selectedTabElm = tabRefs.find( const selectedTabElm = tabRefs.current.find(
(tab) => tab?.getAttribute("aria-selected") === "true" (tab) => tab?.getAttribute("aria-selected") === "true"
) )
if (selectedTabElm) { if (selectedTabElm) {
@@ -250,6 +250,9 @@ export const CodeTabs = ({
} }
}, [selectedTab]) }, [selectedTab])
// Reset tabRefs array before each render
tabRefs.current = []
return ( return (
<div <div
className={clsx( className={clsx(
@@ -299,7 +302,7 @@ export const CodeTabs = ({
{...(typeof child.props === "object" ? child.props : {})} {...(typeof child.props === "object" ? child.props : {})}
changeSelectedTab={changeSelectedTab} changeSelectedTab={changeSelectedTab}
pushRef={(tabButton: HTMLButtonElement | null) => pushRef={(tabButton: HTMLButtonElement | null) =>
tabRefs.push(tabButton) tabRefs.current.push(tabButton)
} }
blockStyle={blockStyle} blockStyle={blockStyle}
isSelected={ isSelected={