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

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

[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”,

[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