fix(Tabs): keep the tab selection controlled from the first render - #3048
Open
mfal wants to merge 1 commit into
Open
fix(Tabs): keep the tab selection controlled from the first render#3048mfal wants to merge 1 commit into
mfal wants to merge 1 commit into
Conversation
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
mfal
enabled auto-merge (squash)
September 1, 2026 11:28
`Tabs` passed `selectedKeyProps ?? selectedKeyState` to `Aria.Tabs`. With neither `selectedKey` nor `defaultSelectedKey` given that is `undefined` on the first render, so `Aria.Tabs` starts uncontrolled. The tab titles reach `Aria.TabList` through a tunnel and commit one paint later, so react-aria's collection is still empty on render 1 and only picks the default tab in the next commit. That selection lands in `selectedKeyState`, the following render passes a defined key, and `useControlledState` warns "A component changed from uncontrolled to controlled". `?? null` instead: `useControlledState` treats only `undefined` as uncontrolled, so `null` reads as "controlled, nothing selected yet" and the auto-selection behaves exactly as before. `Aria.TabsProps` narrows `selectedKey` to `Key` while the state hook behind it accepts `null` — one documented cast bridges that upstream type gap. Split out of #3025, which carries the second warning from the same issue. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
mfal
force-pushed
the
fix/tabs-uncontrolled-to-controlled
branch
from
September 2, 2026 11:53
75fa4ff to
df1009f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of #3014 — the
A component changed from uncontrolled to controlledhalf. Split out of #3025, which carries thePressResponderhalf. Neither PR closes the issue on its own; close it once both are merged.The warning (14×) — all of them
TabsNot
SegmentedControl, as the issue guessed: the two pages that looked likeSegmentedControlcases both happen to contain aTabsexample, as doesdetail-page.TabspassedselectedKeyProps ?? selectedKeyStatetoAria.Tabs. With neitherselectedKeynordefaultSelectedKeygiven that isundefinedon the first render, soAria.Tabsstarts uncontrolled. The tab titles reachAria.TabListthrough a tunnel and commit one paint later, so react-aria's collection is still empty on render 1 and only picks the default tab in the next commit. That selection lands inselectedKeyState, the following render passes a defined key, anduseControlledStatewarns.Fix
?? null.useControlledStatetreats onlyundefinedas uncontrolled, sonullreads as "controlled, nothing selected yet" and the auto-selection behaves exactly as before.Aria.TabsPropsnarrowsselectedKeytoKeywhile the state hook behind it acceptsnull— one documented cast bridges that upstream type gap.Verified
captureOwnerStack()to name the culprit.?? nullfails the added test.Tabs/Default,Tabs/Collapsed,Tabs/TabNotFound,SegmentedControl/Default: zero occurrences of the warning.🤖 Generated with Claude Code