From 092c453b062bc59f4164bc73e1e91a7cf9160529 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Tue, 27 Jan 2026 15:56:12 +0100 Subject: [PATCH] fix(ui): prevent infinite render loop in Tabs with routed tabs When navigating to a URL that doesn't match any tab href, the Tabs component would pass `selectedKey={null}` to React Aria's Tabs, which triggers an infinite render loop. This fix uses an empty string instead of null to indicate no selection, which React Aria handles correctly. Signed-off-by: Johan Persson --- .changeset/rare-papers-decide.md | 5 +++++ packages/ui/src/components/Tabs/Tabs.tsx | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 .changeset/rare-papers-decide.md diff --git a/.changeset/rare-papers-decide.md b/.changeset/rare-papers-decide.md new file mode 100644 index 0000000000..60d8bca3b4 --- /dev/null +++ b/.changeset/rare-papers-decide.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Fixed an infinite render loop in Tabs when navigating to a URL that doesn't match any tab href. diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index 09970db5ca..11d77a6a5f 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -135,9 +135,10 @@ export const Tabs = (props: TabsProps) => { return undefined; } - // Has routed tabs but none are active - controlled mode with no selection + // Has routed tabs but none are active - use empty string for no selection + // (React Aria has a bug with null that causes infinite loops) if (activeTabs.size === 0) { - return null; + return ''; } let selectedId: string | null = null;