Storybook: Setting string argType breaks default enum Control

[ofagbemi]

Describe the bug
Been enjoying storybook@6 so far! I noticed that in my TypeScript project, if I pass a story arg for a string enum value, the control for that arg is no longer a select — it switches to a text box.

Separately, I encountered this issue because some of my components have required props that take a string enum. If that prop isn't passed in from the Storybook args, rendering will throw an error. I'm wondering if it'd be possible to update the enum controls to have the first value selected by default if the property is marked as required. Let me know if you'd like for me to send that in as a separate feature request!

To Reproduce
Steps to reproduce the behavior:

1. Follow the steps in this setup guide: https://gist.github.com/shilman/69c1dd41a466bae137cc88bd2c6ef487
2. Update one of the stories in Button.stories.tsx to pass in a size: 'small' arg
3. Start storybook and view updated story
4. See the story control is a text box instead of a dropdown

Expected behavior
size control should remain a dropdown.

[shilman]

We'll look into this. In the meantime, the workaround is overriding the auto-generated argType:

https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#my-controls-arent-being-auto-generated-what-should-i-do

[ajkl2533]

Repro https://github.com/ajkl2533/storybook-repros/tree/addon-controls-default-enum-string

[shilman]

OK, figured out what's going on but not sure what to do about it yet.

There are three types of argTypes:

• inferred from .args
• extracted from docgen info
• user-specified

Ideally they should take precedence in that order. However, the current implementation first merges .args and user-specified, and THEN merges with the extracted one. Therefore it's not possible to preserve that precedence.

Will figure out a way to restructure the code to fix this, hopefully this weekend. In the meantime, see the workaround above. Thanks for your patience!

UPDATE: proposal: run inferArgTypes in story_store at the END and merge the results with the lowest priority

[viggyfresh]

Just came here to report the same issue, in my case using plain vanilla JS and PropTypes - if I have a property that is defined to be PropTypes.oneOf(["a", "b"]).isRequired, passing "a" turns a very nice select into a very sad text box 📦 and not passing "a" is not an option.

Additionally, these docs threw me for a loop because I confused the color example in the docs with whats going on with this bug! Might be worth emphasizing somewhere in the docs that the argType inference shouldn't be messed up by setting an initial value!

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.10 containing PR #12048 that references this issue. Upgrade today to try it out!

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

[justice47]

I am not sure that my issue is related to this but I've got this type of behaviour in "@storybook/vue": "^6.0.21":

1. I'm importing enum in the story
2. Using it in Default.args
3. Control is appearing as textfield