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

[pixtron]

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

[sysofwan]

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

[bravewick]

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

[philipbushnell-valtech]

We had to downgrade to 6.3.13 (and had to remember to put our public folder back on the package json script).

For us it was happening for "picker" types (e.g. radio and dropdown) when we were using string literals in TypeScript. If we defined the argType explicitly (i.e. as radio) but omitted the options property, obviously our control stopped working but the issue also didn't occur.

[WillGeller]

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?

[paulwoodland]

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)

[WillGeller]

@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 😃

[WillGeller]

@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?

[paulwoodland]

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.

[WillGeller]

Yep downgrading to 6.3 is likely my next step, and commenting out the interactive testing features I have been trying out. I'm guessing this bug thread is being drowned in the hundreds of other open issues on the Storybook repo.

…

On Thu, Apr 7, 2022, 2:15 PM Paul Woodland ***@***.***> wrote: 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. — Reply to this email directly, view it on GitHub <#17063 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABSV2QSCQPTDESQACPQQUU3VD4Q3DANCNFSM5KSVKZ7A> . You are receiving this because you commented.Message ID: ***@***.***>

[evont]

Still happen in the lastest release 6.5.0-alpha.63...

[peteragarclover]

We're already on 6.3.12 and getting this issue. Everything was working fine, and then at some point this bug appeared, and I don't think we had upgraded Storybook. Could it be a shared downstream dependency that we upgraded coincidentally?

Also, for us, it's not happening for select or radio specifically. It's happening with object type props.

This is preventing people from reloading storybook pages or sharing urls. Args are marked as undefined in the URL so as soon as you load any story from it's URL, if those props are required, we just get the error screen saying "Cannot read properties of undefined"

[evont]

I fixed it in my project by copying the @storybook/store in the folder root, then I alter some code in validateOptions in @storybook/store/dist/esm/args.js

if (args[key] === undefined || options.includes(args[key]) || isValidArray) {
      if (key in args) acc[key] = args[key];  // origin code:  acc[key] = args[key]; 
      return acc;
}

I am using pnpm to manage my project, so I add pnpm.overrides to override storybook's @storybook/store, alternative solution is using patch-package in yarn or npm

"pnpm": {
    "overrides": {
      "@storybook/store": "link:store"
    }
  }

[paulwoodland]

Thank you @evont for looking into it! I've tried applying your fix using patch/patch-commit in Yarn, and so far I haven't seen the bug happen (whereas it did happen all the time), so fingers crossed it's sorted it, but I'll keep an eye on it. Hopefully your fix #17973 gets included in the main Storybook release for everyone soon!

[hieucd04]

This is also happening to me on storybook 6.4. Downgrade to 6.3.13 fixed it for me.

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-beta.6 containing PR #18135 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[sysofwan]

Thanks @shilman! Is this going to be ported to v6.4.x?

[CWSites]

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

[jbenjoy2]

still happening in 6.4.22. Any advice on how to fix this without upgrading to 6.5?

[ndelangen]

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