fix(Tabs): keep the tab selection controlled from the first render - #3048
Merged
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
The rationale for `?? null` was a 14-line block comment in `Tabs.tsx`, and #3078 carries the same react-aria fact again in `useControlledHostValueProps`. Two copies in two files that are never read together. Move it to one bullet in the package's non-obvious conventions: react-aria's `useControlledState` reads only `undefined` as uncontrolled, so a component that mirrors the value in its own state has to pass a sentinel. The bullet covers both sentinel shapes (`null` for "nothing selected yet", the type's empty value otherwise), the `??` trap once the sentinel is `null`, and the silent case (`CodeEditor` changes owner without warning). The comment at the call site keeps what a reader needs there: which value keeps it controlled, a pointer to the convention, and why the cast exists. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
mfal
added a commit
that referenced
this pull request
Sep 4, 2026
The hook explained react-aria's controlled/uncontrolled rule in full, and #3048 explained the same rule again in `Tabs.tsx`. That rationale now lives in one bullet in the package's AGENTS.md (added by #3048), so both call sites can stop carrying a copy. What stays here is what a reader needs at this spot: what `emptyValue` is per field type, and why the initialisation spells out `!== undefined` instead of `??` — a caller-supplied `null` controls a `DateRangePicker` with no range selected and must not fall through to `defaultValue`. Comment-only; no behaviour change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
approved these changes
Sep 4, 2026
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
2 participants
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