storybook: Controls incorrectly populating an undefined option
Describe the bug
Since upgrading to v6.2.5 all optional component props using string literals are also outputting an “undefined” option. Whilst technically accurate, this is causing confusion with users, particularly where default prop values are set that would make an undefined value an impossible outcome.
Using TypeScript and React. We’ve upgraded directly from v6.1.2 so unclear exactly when the behaviour changed.
To Reproduce Steps to reproduce the behavior:
- Create a component using a string literal prop type
- View in Canvas and look in Controls panel
undefinedvalue should be present
Expected behavior
I’d expect undefined to be ignored even if it was technically present on the typing (due to being optional), as has historically been the case.
Screenshots
Incorrect in v6.2.5:

Expected behaviour as of v6.1.2:

System
System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
Binaries:
Node: 12.18.2 - C:\Program Files\nodejs\node.EXE
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 89.0.4389.114
Edge: Spartan (44.19041.423.0), Chromium (89.0.774.68)
npmPackages:
@storybook/addon-a11y: ^6.2.5 => 6.2.5
@storybook/addon-actions: ^6.2.5 => 6.2.5
@storybook/addon-essentials: ^6.2.5 => 6.2.5
@storybook/addon-links: ^6.2.5 => 6.2.5
@storybook/node-logger: ^6.2.5 => 6.2.5
@storybook/preset-create-react-app: ^3.1.7 => 3.1.7
@storybook/react: ^6.2.5 => 6.2.5
@storybook/theming: ^6.2.5 => 6.2.5
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 4
- Comments: 17 (6 by maintainers)
We are also explaining the same issue as the comments above
Storybook is passing
"undefined"(a string) instead ofundefinedto the component (this might be another bug next to the fact that undefined appears at all)Hi!
I don’t know if I need to open another issue but it seems to be on the same subject. I have this ‘undefined’ option too and if I use the value of the prop in a object, the actual value passed is ‘undefined’ (as string) which can crash storybook. You can see below the gif of the behavior and you can find the repository to reproduce the issue here
Despite that, storybook controls are amazing so thanks for them!
I’m also coming across this
undefinedissue where optional props (with or without defaults) in TS are including anundefinedradio on Controls. See below as an example. Using the latest Storybook and TypeScript. Furthermore, I get all sorts of errors if I selectundefined, like vinassefranche is demonstrating above as the component is never meant to get into that state (because it has a default value set).This is still happening today, in v7. I’m currently looking for the string
"undefined"now whenever I’m creating a Story whereundefinedis an expected option via the controls.We’re still experiencing this issue in 6.4.22, where optional props are being presented in Storybook with an
undefinedoption even though a default prop is set within the component.Is there an ETA on when this might be addressed?