[addon-knobs]: options knob with display: multi-select inferring wrong type info

[t-moennich]

Just copied from this very nice detailed explanation in storybookjs/storybook#10692

Until storybookjs/storybook#12561 is resolved, a fix for the type error should be added to v5 :pray:

---

Describe the bug When using the options knob with {display: multi-select}, it is inferring the return type from the values of the valuesObj, which need to be strings in order for the multi-select to work. The return type is being inferred as string when the multi-select actually returns an array of strings, so string[].

To Reproduce Steps to reproduce the behavior:

1. Create a optionsKnob with the display set to multi-select
2. pass in a values object with the labels and values you expect to see in the dropdown.
3. pass in a default value, an array of the values you expect to be auto-selected.
4. check the return value that optionsKnob returns

Expected behavior Given that the optionsKnob returns an array of strings when it is being used as a multi-select, it should return the correct type information: string[]

Screenshots The implementation:

The resulting console log of what options is returning:

The type error:

The knob used in the UI is correct:

Code snippets

      const valueOptions = {
        facebook: "facebook",
        twitter: "twitter",
        email: "email",
        link: "link"
      };
      const defaultNetworks: string[] = [
        "facebook",
        "twitter",
        "email",
        "link"
      ];

      const networks: string[] = options( //should return an array of strings
        "Networks",
        valueOptions,
        defaultNetworks,
        {
          display: "multi-select"
        }
      );

System:

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: 5.3.10 => 5.3.10 
    @storybook/addon-docs: 5.3.10 => 5.3.10 
    @storybook/addon-info: 5.3.10 => 5.3.10 
    @storybook/addon-knobs: 5.3.10 => 5.3.10 
    @storybook/addon-links: 5.3.10 => 5.3.10 
    @storybook/addon-options: 5.3.10 => 5.3.10 
    @storybook/addon-storysource: ^5.3.13 => 5.3.18 
    @storybook/addons: 5.3.10 => 5.3.10 
    @storybook/react: 5.3.10 => 5.3.10 

[shilman]

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls documentation
• Migration instructions

Please upgrade and try them out today!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!