Array argument is transformed in Object after refreshing the page with a pre-defined value set in the URL

Describe the bug

Given I have a component with an argument “correctAnswers” which is configured as a “string[]” And in the “Controls” panel I can see that the control value is initially an empty array And I manually modify the control value via the “Controls” panel adding an element to it (“answer1”) And I see that in the browser URL the control value change is tracked as follows: “&args=correctAnswers[0]:answer1” When I refresh the page with the updated URL Then I see that the control value becomes an Object containing a single key with the value I added before (“answer1”) And my component breaks because it receives an Object instead of an Array for the specific control

To Reproduce

Reproduction deployed with Chromatic: https://60e41a0b495b7b003b17750c-mxahjzabca.chromatic.com/?path=/story/bug--bug-case

Please follow the description Gherkin to reproduce the issue.

The reproduction can be cloned from the following repo: https://github.com/marcodellovo-dcbo/my-storybook-reproduction.git

System

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    npm: 7.17.0 - ~/Documents/Docebo/Dev/repos/sdk/training-elements/node_modules/.bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 88.0.1
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-a11y: ~6.3.1 => 6.3.1
    @storybook/addon-actions: ~6.3.1 => 6.3.1
    @storybook/addon-console: ~1.2.3 => 1.2.3
    @storybook/addon-docs: ~6.3.1 => 6.3.1
    @storybook/addon-essentials: ~6.3.1 => 6.3.1
    @storybook/addon-links: ~6.3.1 => 6.3.1
    @storybook/angular: ~6.3.1 => 6.3.1
    @storybook/theming: ~6.3.1 => 6.3.1

Additional context

There are no errors in the console and I haven’t defined any custom configuration for the specific control via “ArgTypes”.

Initial state of the control when there isn’t any pre-defined value in the browser URL

State of the control when there’s a pre-defined value for it in the browser URL

[shilman]

thanks for the repro @marcodellovo-dcbo ! that def looks like a 🐛

[marcodellovo-dcbo]

@shilman I’ve updated the description including the link to the deployed reproduction and the repo in case you need to check the code.

Thanks!