From aed8045a01cca859463a092455b2ce36c26ae414 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Thu, 31 Oct 2024 08:57:43 +0000 Subject: [PATCH] =?UTF-8?q?Prevent=20GOV.UK=20Frontend=20=E2=80=9Calready?= =?UTF-8?q?=20initialised=E2=80=9D=20Tabs=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- designer/client/src/components/Tabs/Tabs.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/designer/client/src/components/Tabs/Tabs.tsx b/designer/client/src/components/Tabs/Tabs.tsx index e5ad6c188..8a502c817 100644 --- a/designer/client/src/components/Tabs/Tabs.tsx +++ b/designer/client/src/components/Tabs/Tabs.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import { Tabs as TabsJS } from 'govuk-frontend' -import { useEffect, useRef, type ComponentProps } from 'react' +import { useEffect, useRef, useState, type ComponentProps } from 'react' interface Props extends ComponentProps<'div'> { idPrefix?: string @@ -18,14 +18,14 @@ export function Tabs(props: Readonly) { title ??= 'Contents' const tabsRef = useRef(null) + const [instance, setInstance] = useState() useEffect(() => { - if (tabsRef.current) { - // eslint-disable-next-line no-new - new TabsJS(tabsRef.current) + if (!instance && tabsRef.current) { + setInstance(new TabsJS(tabsRef.current)) onInit?.() } - }, [tabsRef, onInit]) + }, [instance, tabsRef, onInit]) const tabContent = items.map((item, index) => { const { id, label, panel, ...linkAttributes } = item