From e8f8646fdb6ff5c6866c8a820c02f0bf1983930f Mon Sep 17 00:00:00 2001 From: Abel John <9206066+abeljohn@users.noreply.github.com> Date: Mon, 2 Feb 2026 22:19:23 -0800 Subject: [PATCH 1/2] fix: allow Tabs selectedKey to be null --- packages/@react-stately/tabs/src/useTabListState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-stately/tabs/src/useTabListState.ts b/packages/@react-stately/tabs/src/useTabListState.ts index 116e39b059f..494db56aa4d 100644 --- a/packages/@react-stately/tabs/src/useTabListState.ts +++ b/packages/@react-stately/tabs/src/useTabListState.ts @@ -48,7 +48,7 @@ export function useTabListState(props: TabListStateOptions) useEffect(() => { // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection) let selectedKey = currentSelectedKey; - if (props.selectedKey == null && (selectionManager.isEmpty || selectedKey == null || !collection.getItem(selectedKey))) { + if (props.selectedKey === undefined && (selectionManager.isEmpty || selectedKey == null || !collection.getItem(selectedKey))) { selectedKey = findDefaultSelectedKey(collection, state.disabledKeys); if (selectedKey != null) { // directly set selection because replace/toggle selection won't consider disabled keys From 6eac44d89ff40132179d3bd0b36ebe3317ef42a8 Mon Sep 17 00:00:00 2001 From: Abel John <9206066+abeljohn@users.noreply.github.com> Date: Mon, 2 Feb 2026 22:21:38 -0800 Subject: [PATCH 2/2] update test to include null selectedKey --- packages/react-aria-components/stories/Tabs.stories.tsx | 2 +- packages/react-aria-components/test/Tabs.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-aria-components/stories/Tabs.stories.tsx b/packages/react-aria-components/stories/Tabs.stories.tsx index ab298d29521..8e1de4a2a5e 100644 --- a/packages/react-aria-components/stories/Tabs.stories.tsx +++ b/packages/react-aria-components/stories/Tabs.stories.tsx @@ -25,7 +25,7 @@ export default { export type TabsStory = StoryFn; export const TabsExample: TabsStory = () => { - let [url, setUrl] = useState('/FoR'); + let [url, setUrl] = useState(null); return ( diff --git a/packages/react-aria-components/test/Tabs.test.js b/packages/react-aria-components/test/Tabs.test.js index 80c9ebfc2d4..7dd9192a0f3 100644 --- a/packages/react-aria-components/test/Tabs.test.js +++ b/packages/react-aria-components/test/Tabs.test.js @@ -487,7 +487,7 @@ describe('Tabs', () => { expect(tabs[2].tagName).toBe('A'); expect(tabs[2]).toHaveAttribute('href', '/Emp'); - expect(tabs[0]).toHaveAttribute('aria-selected', 'true'); + expect(tabs[1]).toHaveAttribute('aria-selected', 'false'); await user.click(tabs[1]); expect(tabs[1]).toHaveAttribute('aria-selected', 'true');