diff --git a/.changeset/fix-tabs-active-indicator-disappearing.md b/.changeset/fix-tabs-active-indicator-disappearing.md new file mode 100644 index 0000000000..c8537940c9 --- /dev/null +++ b/.changeset/fix-tabs-active-indicator-disappearing.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed an issue where the active tab indicator would disappear shortly after page load for uncontrolled Tabs. + +**Affected components:** Tabs diff --git a/packages/ui/src/components/Tabs/TabsIndicators.tsx b/packages/ui/src/components/Tabs/TabsIndicators.tsx index aef792310e..400ecf82c2 100644 --- a/packages/ui/src/components/Tabs/TabsIndicators.tsx +++ b/packages/ui/src/components/Tabs/TabsIndicators.tsx @@ -32,6 +32,12 @@ export const TabsIndicators = (props: TabsIndicatorsProps) => { const prevSelectedKey = useRef(null); const updateCSSVariables = useCallback(() => { + // When rendered inside CollectionBuilder's hidden tree (for collection + // building), there is no TabListStateContext provider, so state is null. + // Bail out to avoid overwriting CSS variables on the shared tabsRef DOM + // element that the real instance also writes to. + if (state == null) return; + if (!tabsRef.current) return; const tabsRect = tabsRef.current.getBoundingClientRect();