You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When writing custom component documentation (ie not autodocs) with multiple <Controls /> blocks on a page, changing the value of a control in one instance of <Controls /> can manipulate the control in another instance instead. The issue is that the input elements in each <Controls /> block share the same id and name attributes per arg. For example, for the arg size with 3 options, each instance of <Controls /> will render a radio group using the ids control-size-0, control-size-1, and control-size-2.
Describe the bug
When writing custom component documentation (ie not autodocs) with multiple
<Controls />
blocks on a page, changing the value of a control in one instance of<Controls />
can manipulate the control in another instance instead. The issue is that the input elements in each<Controls />
block share the sameid
andname
attributes per arg. For example, for the argsize
with 3 options, each instance of<Controls />
will render a radio group using theid
scontrol-size-0
,control-size-1
, andcontrol-size-2
.Here's a recording from the reproduction link below:
https://github.com/user-attachments/assets/4aaa57b2-7213-4652-820b-718188949d24
Reproduction link
https://stackblitz.com/edit/github-ygcv3v?file=src%2Fstories%2Fbutton.mdx
Reproduction steps
System
Storybook Environment Info:
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm <----- active
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
@storybook/addon-essentials: ^8.4.0-alpha.4 => 8.4.0-alpha.4
@storybook/addon-interactions: ^8.4.0-alpha.4 => 8.4.0-alpha.4
@storybook/addon-onboarding: ^8.4.0-alpha.4 => 8.4.0-alpha.4
@storybook/blocks: ^8.4.0-alpha.4 => 8.4.0-alpha.4
@storybook/react: ^8.4.0-alpha.4 => 8.4.0-alpha.4
@storybook/react-vite: ^8.4.0-alpha.4 => 8.4.0-alpha.4
@storybook/test: ^8.4.0-alpha.4 => 8.4.0-alpha.4
storybook: ^8.4.0-alpha.4 => 8.4.0-alpha.4
Additional context
No response
The text was updated successfully, but these errors were encountered: