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:

  1. Create a component using a string literal prop type
  2. View in Canvas and look in Controls panel
  3. undefined value 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: image

Expected behaviour as of v6.1.2: image

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)

Most upvoted comments

We are also explaining the same issue as the comments above

Storybook is passing "undefined" (a string) instead of undefined to 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

storybook-issue

Despite that, storybook controls are amazing so thanks for them!

I’m also coming across this undefined issue where optional props (with or without defaults) in TS are including an undefined radio on Controls. See below as an example. Using the latest Storybook and TypeScript. Furthermore, I get all sorts of errors if I select undefined, like vinassefranche is demonstrating above as the component is never meant to get into that state (because it has a default value set).

Screenshot 2021-05-06 at 09 20 04

This is still happening today, in v7. I’m currently looking for the string "undefined" now whenever I’m creating a Story where undefined is 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 undefined option even though a default prop is set within the component.

Is there an ETA on when this might be addressed?