storybook: args values not present in url are casted to !undefined for controls of type select and radio

Describe the bug If the url contains at least one arg, all arguments for controls of type select or radio that have no arg present in the url are casted to undefined.

To Reproduce 1.) Checkout the repro: 2.) yarn storybook 3.) Open the story: http://localhost:6006/?path=/story/test-args--bob 4.) Change value for foo from bar to baz as expected URL changes to: http://localhost:6006/?path=/story/test-args--bob&args=foo:baz 5.) Copy URL and open in another browser or refresh the tab 6.) URL changes to http://localhost:6006/?path=/story/test-args--bob&args=first:!undefined;last:!undefined;foo:baz 7.) No args for first and last are passed to the story. Default args should be passed.

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 95.0
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.4 => 6.5.0-alpha.4
    @storybook/addon-essentials: ^6.5.0-alpha.4 => 6.5.0-alpha.4
    @storybook/addon-links: ^6.5.0-alpha.4 => 6.5.0-alpha.4
    @storybook/html: ^6.5.0-alpha.4 => 6.5.0-alpha.4

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 30
Comments: 19 (2 by maintainers)

Most upvoted comments

@shilman Do you have any idea if this bug will be fixed in Storybook 6.5 or do you think it would be considered a patch version update for a bug fix?

This bug does make demoing my Storybook seem function quite janky. I would like not to have to downgrade to a previous version as I am using other new features in 6.4 removing radio/select controls is also not ideal as there will then be no nice way to change component inputs… Perhaps this bug deserves a bit more attention?

CC @ndelangen 😃

+12

WillGeller on Mar 16, 2022

Also having big problems with this - the same as other people are reporting, when using dropdowns in a story, all args are going to !undefined in the URL on refresh (including when resizing the window down small enough)

paulwoodland on Mar 3, 2022

This is also happening to me on storybook 6.4 when using inline-radio argTypes. It seems to happen if I first change the control value of a property using a radio button, than refresh the page, and I will end up with this in the url &args=variant:!undefined and my stories with variant will look like the default, Is there any other similar control types that don’t have the bug?

WillGeller on Mar 2, 2022

We are in the same position, we may have to go back to a previous version as this bug is making Storybook almost unusable for development - every time you change a file that causes a reload, it looses all the select args and you have to manually edit the URL to remove the args= querystring. We can’t find any workarounds other than doing that manually every time it reloads.

paulwoodland on Apr 7, 2022

@shilman @ndelangen Any update from core maintainers on whether this bug is deemed a priority or not? Is it slated to be fixed in an update? Looking at downgrading to older version of Storybook here as this is very confusing bug that is causing issues for my team when reviewing our component library. Anybody on the thread have any workarounds?

WillGeller on Apr 7, 2022

This is also happening on version 6.4.19 but not on version 6.3.12

bravewick on Feb 17, 2022

This is also happening on page reflow (after resizing to bigger/smaller window), and when opening a story iframe for me.

sysofwan on Jan 12, 2022

@jbenjoy2 no that won’t happen; you’ll need to upgrade to get the fix.

ndelangen on Apr 11, 2023

It would be nice if there was a port to 6.4.x as I’m unable to upgrade to 6.5 and this issue is still occurring on 6.4.13

CWSites on Jul 12, 2022