Controls: Allow resetting the Select control #33289
Conversation
|
View your CI Pipeline Execution ↗ for commit 3887a59
☁️ Nx Cloud last updated this comment at |
📝 WalkthroughWalkthroughModified the Select component's placeholder option to conditionally disable based on whether the current value equals the NO_SELECTION constant. Added a new story with interactive test coverage demonstrating resettable select behavior and verifying value and onChange callbacks. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10–15 minutes
✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/addons/docs/src/blocks/controls/options/Select.tsx(1 hunks)code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use ESLint and Prettier configurations that are enforced in the codebase
Files:
code/addons/docs/src/blocks/controls/options/Select.tsxcode/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Enable TypeScript strict mode
Files:
code/addons/docs/src/blocks/controls/options/Select.tsxcode/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/addons/docs/src/blocks/controls/options/Select.tsxcode/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
code/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions that need to be tested from their modules
Files:
code/addons/docs/src/blocks/controls/options/Select.tsxcode/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
code/**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing
Files:
code/addons/docs/src/blocks/controls/options/Select.tsxcode/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests
Applied to files:
code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
📚 Learning: 2025-11-28T14:50:24.889Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Follow existing patterns and conventions in the Storybook codebase
Applied to files:
code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses in Vitest tests
Applied to files:
code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in `beforeEach` blocks in Vitest tests
Applied to files:
code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: normal
- GitHub Check: nx
- GitHub Check: nx
- GitHub Check: nx
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (2)
code/addons/docs/src/blocks/controls/options/Select.tsx (1)
123-123: Reset functionality correctly implemented.The conditional disabling allows users to re-select the placeholder after choosing an option, which triggers
onChange(undefined)and resets the control. The logic is sound: when a real option is selected, the placeholder becomes enabled; when already at placeholder state, it remains disabled to prevent redundant clicks.Verify that the UX of having a re-enabled placeholder option feels intuitive to users, as this differs from typical select patterns where placeholders remain permanently disabled.
code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx (1)
3-3: LGTM!The testing utilities are correctly imported for the new interactive test.
| export const ArrayResettable: Story = { | ||
| args: { | ||
| value: undefined, | ||
| }, | ||
| play: async ({ canvas, args }) => { | ||
| const select = canvas.getByRole('combobox'); | ||
| expect(select).toHaveValue('Choose option...'); | ||
|
|
||
| await userEvent.click(select); | ||
| await userEvent.selectOptions(select, arrayOptions[2]); | ||
|
|
||
| expect(args.onChange).toHaveBeenCalledWith(arrayOptions[2]); | ||
| expect(select).toHaveValue(arrayOptions[2]); | ||
|
|
||
| await userEvent.click(select); | ||
| await userEvent.selectOptions(select, 'Choose option...'); | ||
|
|
||
| expect(args.onChange).toHaveBeenCalledWith(undefined); | ||
| expect(select).toHaveValue('Choose option...'); | ||
| }, | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, verify the file exists and check the content at the specified lines
cat -n code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx | sed -n '65,100p'Repository: storybookjs/storybook
Length of output: 1179
🏁 Script executed:
# Find and examine the SelectOptions component that's being tested
find code -name "SelectOptions.*" -type f | grep -v stories | grep -v testRepository: storybookjs/storybook
Length of output: 47
🏁 Script executed:
# Let's look at the beginning of the story file to understand the setup
head -n 80 code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsxRepository: storybookjs/storybook
Length of output: 1652
🏁 Script executed:
# Find and examine the OptionsControl component
cat code/addons/docs/src/blocks/controls/options/Options.tsxRepository: storybookjs/storybook
Length of output: 1782
🏁 Script executed:
# Find SelectControl implementation
cat code/addons/docs/src/blocks/controls/options/Select.tsxRepository: storybookjs/storybook
Length of output: 4658
🏁 Script executed:
# Search for other play function tests in stories that test controlled components
# Look for patterns where onChange is called and then value is checked
rg -l "play:.*async" code/addons/docs/src/blocks/controls/options/*.stories.tsxRepository: storybookjs/storybook
Length of output: 135
🏁 Script executed:
# Search for play functions that test onChange and then check values/props
rg -n "play:.*async.*\{" code --type=tsx -A 20 | rg -B 5 -A 15 "onChange.*\n.*expect.*\(.*\)" | head -60Repository: storybookjs/storybook
Length of output: 284
🏁 Script executed:
# Let me search for similar test patterns more carefully
rg -U "play.*async.*\{[\s\S]*?onChange[\s\S]*?expect.*toHaveValue" code --type ts --type tsx -A 5 -B 2 | head -80Repository: storybookjs/storybook
Length of output: 92
🏁 Script executed:
# Search more broadly for play function patterns without file type restrictions
rg -A 30 "export const ArrayResettable" code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsxRepository: storybookjs/storybook
Length of output: 883
🏁 Script executed:
# Check the Storybook version and look for test utilities documentation
cat code/package.json | grep -A 2 -B 2 '"storybook"'Repository: storybookjs/storybook
Length of output: 234
🏁 Script executed:
# Check for test setup and jest configuration
find code/addons/docs -name "*.config.*" -o -name "jest.setup.*" -o -name "vitest.config.*" | head -10Repository: storybookjs/storybook
Length of output: 98
🏁 Script executed:
# Check if there are any test run configurations or results
# Also look for any mocking of onChange that might auto-update args
rg -B 10 "ArrayResettable" code/addons/docs/src/blocks/controls/options/SelectOptions.stories.tsx | head -20Repository: storybookjs/storybook
Length of output: 218
🏁 Script executed:
# Look for any test execution scripts or configurations that run these story tests
find code/addons/docs -name "*.test.*" -o -name "*.spec.*" | head -20Repository: storybookjs/storybook
Length of output: 323
🏁 Script executed:
# Search for Storybook's play function or test runner documentation in the repo
find code -name "*.md" -path "*/docs/*" | xargs grep -l "play.*function" | head -5Repository: storybookjs/storybook
Length of output: 126
🏁 Script executed:
# Read the ESLint rule documentation to understand play function context
cat code/lib/eslint-plugin/docs/rules/context-in-play-function.mdRepository: storybookjs/storybook
Length of output: 2068
🏁 Script executed:
# Search for other play function examples in stories to understand the pattern
rg -l "play.*async.*{" code --type ts -g "*stories.ts" | head -10Repository: storybookjs/storybook
Length of output: 156
The play function tests user interactions but has a logical flaw in the controlled component pattern.
The test verifies that onChange is called correctly (line 84, 90), but the assumptions about component state updates are incorrect. The SelectControl component is fully controlled—it receives value as a prop and does not maintain internal state. After calling onChange, the args.value is never updated, so the component won't re-render with the new selected value. The assertions on lines 85 and 91 (expect(select).toHaveValue(...)) may pass due to DOM state changes from userEvent.selectOptions(), but they don't reflect the actual rendered state of the controlled component. To properly test a controlled component in a story, either:
- Update
args.valuein the play function after callingonChange, or - Use a story setup that automatically syncs
onChangecallbacks back to args (if Storybook provides such a mechanism).
Verify the actual behavior by running this story's play function to confirm whether the select element visually updates or if the test passes due to DOM-level state diverging from the React component's rendered value.
There was a problem hiding this comment.
One way to put it is that the transient states before re-rendering are correct, so there is no flash of incorrect state :p Do you buy that, @ghengeveld? :P
Ultimately the test is testing some irrelevant things that only matter in edge cases, but it is also testing the relevant things so I don't mind leaving it the way it is.
Partially fixes #12641
What I did
Issue #12641 reported that controls would sometimes display as enums instead of selects, and and that select controls could not be reset.
PR #33200 addresses the first reported issue. This PR addresses the second one so we don't accidentally lose track of it.
Both PRs must be merged before the issue can be closed.
This PR addresses the reset issue by allowing users to re-select the "Select option..."
optionin theselect, which correctly callsonChangewith theundefinedvalue.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Documentation
N/A
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
Bug Fixes
Tests
✏️ Tip: You can customize this high-level summary in your review settings.