docs: fix runtime error occuring with code tabs (#13873)
This commit is contained in:
@@ -175,7 +175,7 @@ export const CodeTabs = ({
|
||||
group,
|
||||
})
|
||||
|
||||
const tabRefs: (HTMLButtonElement | null)[] = useMemo(() => [], [])
|
||||
const tabRefs = useRef<(HTMLButtonElement | null)[]>([])
|
||||
const codeTabSelectorRef = useRef<HTMLSpanElement | null>(null)
|
||||
const codeTabsWrapperRef = useRef<HTMLDivElement | null>(null)
|
||||
|
||||
@@ -221,8 +221,8 @@ export const CodeTabs = ({
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (codeTabSelectorRef?.current && tabRefs.length) {
|
||||
const selectedTabElm = tabRefs.find(
|
||||
if (codeTabSelectorRef?.current && tabRefs.current.length) {
|
||||
const selectedTabElm = tabRefs.current.find(
|
||||
(tab) => tab?.getAttribute("aria-selected") === "true"
|
||||
)
|
||||
if (selectedTabElm) {
|
||||
@@ -250,6 +250,9 @@ export const CodeTabs = ({
|
||||
}
|
||||
}, [selectedTab])
|
||||
|
||||
// Reset tabRefs array before each render
|
||||
tabRefs.current = []
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
@@ -299,7 +302,7 @@ export const CodeTabs = ({
|
||||
{...(typeof child.props === "object" ? child.props : {})}
|
||||
changeSelectedTab={changeSelectedTab}
|
||||
pushRef={(tabButton: HTMLButtonElement | null) =>
|
||||
tabRefs.push(tabButton)
|
||||
tabRefs.current.push(tabButton)
|
||||
}
|
||||
blockStyle={blockStyle}
|
||||
isSelected={
|
||||
|
||||
Reference in New Issue
Block a user