[tabs] Fire onValueChange for automatic tab selection #3758
+383
−12
Conversation
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
commit: |
Bundle size report
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Greptile SummaryThis PR fixes issue #2097 by ensuring Key changes:
Issue found:
The test coverage is thorough and validates the main scenarios. The implementation properly uses Confidence Score: 4/5
Important Files Changed
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+261
to
+268
| let reason: TabsRoot.ChangeEventReason; | ||
| if (isInitialRun) { | ||
| reason = REASONS.initial; | ||
| } else if (selectionIsDisabled) { | ||
| reason = REASONS.disabled; | ||
| } else { | ||
| reason = REASONS.missing; | ||
| } |
There was a problem hiding this comment.
logic: The reason assignment logic always uses 'initial' for the first run, even when an explicit defaultValue is provided but the corresponding tab doesn't exist. According to the PR description, 'initial' should only be used when "no value/defaultValue provided", but this code will fire with 'initial' reason even if defaultValue={1} is provided but tab 1 is missing.
Consider refining the logic:
Suggested change
| let reason: TabsRoot.ChangeEventReason; | |
| if (isInitialRun) { | |
| reason = REASONS.initial; | |
| } else if (selectionIsDisabled) { | |
| reason = REASONS.disabled; | |
| } else { | |
| reason = REASONS.missing; | |
| } | |
| // Determine the appropriate reason based on context: | |
| // - 'initial': First automatic selection (no value/defaultValue provided) | |
| // - 'disabled': Tab became disabled after initial render | |
| // - 'missing': Tab was removed from DOM or never existed | |
| let reason: TabsRoot.ChangeEventReason; | |
| if (isInitialRun && isAutomaticDefault) { | |
| reason = REASONS.initial; | |
| } else if (selectionIsDisabled) { | |
| reason = REASONS.disabled; | |
| } else { | |
| reason = REASONS.missing; | |
| } |
This ensures 'initial' is only used when no explicit value was provided, making the behavior match the documentation.
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/react/src/tabs/root/TabsRoot.tsx
Line: 261:268
Comment:
**logic:** The reason assignment logic always uses `'initial'` for the first run, even when an explicit `defaultValue` is provided but the corresponding tab doesn't exist. According to the PR description, `'initial'` should only be used when "no value/defaultValue provided", but this code will fire with `'initial'` reason even if `defaultValue={1}` is provided but tab 1 is missing.
Consider refining the logic:
```suggestion
// Determine the appropriate reason based on context:
// - 'initial': First automatic selection (no value/defaultValue provided)
// - 'disabled': Tab became disabled after initial render
// - 'missing': Tab was removed from DOM or never existed
let reason: TabsRoot.ChangeEventReason;
if (isInitialRun && isAutomaticDefault) {
reason = REASONS.initial;
} else if (selectionIsDisabled) {
reason = REASONS.disabled;
} else {
reason = REASONS.missing;
}
```
This ensures `'initial'` is only used when no explicit value was provided, making the behavior match the documentation.
How can I resolve this? If you propose a fix, please make it concise.
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.
Fixes a bug where the
onValueChangecallback was not invoked when the selected tab changed automatically due to external factors.Previously, onValueChange only fired for user-initiated tab changes (clicks, keyboard navigation). It did not fire when:
Now,
onValueChangefires in all these scenarios with appropriate reason values.It also fires during initial render when no
valueordefaultValueis provided, and the component automatically selects the first enabled tab.New reason values in onValueChange:
'initial': First automatic selection on mount (no value/defaultValue provided)'disabled': Selected tab became disabled after initial render'missing': Selected tab was removed from the DOMThe existing
'none'reason is used for user-initiated changes.Fixes #2097