In argTypes, options array prevents args being passed to canvas in iframe

[SiAdcock]

Describe the bug

I get a lot of use out of opening a canvas in a new tab. However, I find that args are not passed to the component in the new tab when using the options array as part of mapping to complex arg values.

Removing the options array and the control property fixes the issue, however the user is then expected to manually enter the mapping key, which is not easy to find.

e.g.

export default {
  title: "Example/Button",
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    label: {
      defaultValue: "string",
      options: ["string", "jsx"],
      mapping: {
        string: "Option 1",
        jsx: <em>Option 1</em>,
      },
      control: "radio",
    },
    backgroundColor: { control: "color" },
  },
}

In canvas view within Storybook UI:

Opening canvas in new tab:

To Reproduce

To see the component within a tab with no args:

https://61fc54fb66066e003a36e1a1-omnrupgxxj.chromatic.com/iframe.html?args=&id=example-button--primary&viewMode=story

To navigate via the Storybook UI:

https://61fc54fb66066e003a36e1a1-omnrupgxxj.chromatic.com/?path=/story/example-button--primary

1. Open Button > Primary
2. Switch to Canvas mode
3. Observe "label" is set to "string" in the Controls panel. The button displays "Option 1"
4. Click "Open canvas in new tab" icon
5. Observe the button has no label

I have created a minimal repro with instructions at this repo:

https://github.com/SiAdcock/test-sb-options

System

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 3.1.1 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Edge: 97.0.1072.76
    Firefox: 92.0
    Safari: 14.1.2
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.34 => 6.5.0-alpha.34
    @storybook/addon-docs: ^6.5.0-alpha.34 => 6.5.0-alpha.34
    @storybook/addon-essentials: ^6.5.0-alpha.34 => 6.5.0-alpha.34
    @storybook/addon-links: ^6.5.0-alpha.34 => 6.5.0-alpha.34
    @storybook/react: ^6.5.0-alpha.34 => 6.5.0-alpha.34

[dlangston]

We are having a similar issue where our different button color variants change back to the default colors but only when opened in a new canvas tab. So in our case, a secondary grey button appears as a primary teal button.

[shilman]

I'm not sure if this is a bug or a documentation issue or both. The issue is that you're using the deprecated defaultValue field. I think we didn't remove it because it's a breaking change so it needs to wait until 7.0.

If you update your example to this, it should work as expected:

export default {
  title: "Example/Button",
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    label: {
      options: ["string", "jsx"],
      mapping: {
        string: "Option 1",
        jsx: <em>Option 1</em>,
      },
      control: "radio",
    },
    backgroundColor: { control: "color" },
  },
  args: { label: "string" },
}

This is documented here but does not document the implications about the canvas iframe, whose behavior seems inconsistent with the defaultValue handling in the full storybook app. cc @tmeasday @jonniebigodes

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#no-longer-inferring-default-values-of-args

[tmeasday]

I don't think setting defaultValue to "string" when there is a mapping ("string" -> X) is explicitly supported. I suspect it is just some artifact of the option control being rendered that means it actually works here (thus it not working in canvas).

[dlangston]

This workaround seems to work sporadically. And on when implementing optional props, like adding an icon to a button, it reverted back to default styling. We also tried removing the customised argTypes and it still made no difference.

[SiAdcock]

@shilman Thanks so much for your response. Unfortunately the workaround you posted has not fixed the issue for me:

export default {
  title: "Example/Button",
  component: Button,
  args: {
    label: "string",
  },
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    label: {
      options: ["string", "jsx"],
      mapping: {
        string: "Option 1",
        jsx: <em>Option 1</em>,
      },
      control: "radio",
    },
    backgroundColor: { control: "color" },
  },
}

Do you have any other suggestions?

iframe exhibiting behaviour: https://6214928c283a59003ac59209-qjmbgslptk.chromatic.com/iframe.html?args=&id=example-button--primary&viewMode=story

Storybook: https://6214928c283a59003ac59209-qjmbgslptk.chromatic.com

Source code: https://github.com/SiAdcock/test-sb-options/blob/7860b7e60fd22b4825b40e8710ecf11ce68bab5b/stories/Button.stories.jsx#L6-L24

[burdisal]

I am experiencing this same issue after upgrading from Storybook 6.3.12 to 6.4.19.

I think I have narrowed down that this is due to the 'options' array, when defining argTypes in a story file as well. If I remove the "options" array from a control's definition (radio, select, or other type that uses "options"), then the data for that field is passed correctly into the iframe. I am not using the defaultValue field in any of my storybook files either. All the other control types work as expected, just not when "options" is present.

Here's my environment information, if that is helpful:
OS: MacOS Monterey 12.2.1
node: 16.9.1
npm: 7.24.2
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/node-logger": "^6.4.19",
"@storybook/preset-create-react-app": "^3.2.0",
"@storybook/react": "^6.4.19",

[toli444]

I'm experiencing the same issue: #17517

[ghost]

I am also experiencing this issue,

I have no defaultValue anywhere in my project.

My mapping is from strings to maps, and I'd like to be able to select the string in the dropdown, and have it pass the associated map.

I do have an options array, containing all the strings that are keys in the map. Removing it leaves only the mapping key, and causes the control in Storybook to show a json editor.

With the options array, I do see the URL updating as I change the options, but I note that refreshing causes Storybook to complain about omitting potentially unsafe URL tags, even though it's just the string key.

Another thing I realized is that the official doc example uses both options and mapping here

[eendkonijn]

Experiencing this issue as well, with or without defaultValue

[shilman]

@SiAdcock This took ages but I upgraded your repro to Storybook 7.0.x and the problem appears to be fixed there. Closing this one -- please feel free to reopen if you believe it's still a problem in the latest release!