Controls: boolean control throws a red warning

[matheo]

Describe the bug

Playing with "@storybook/addon-controls": "6.0.0-beta.17" I got this warning after clicking a boolean control, which is the inverseColors input (at the beggining of the screenshot):

Upcoming clicks in the checkbox doesn't throw this,
as it seems that the checkbox is already changed to controlled.

System:

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 10.18.0 - ~/.nvm/versions/node/v10.18.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.2 - ~/.nvm/versions/node/v10.18.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 76.0.1
  npmPackages:
    @storybook/addon-a11y: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/addon-actions: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/addon-controls: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/addon-docs: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/addon-links: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/addon-viewport: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/addons: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/angular: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/cli: 6.0.0-beta.17 => 6.0.0-beta.17 
    @storybook/source-loader: 6.0.0-beta.17 => 6.0.0-beta.17

[matheo]

The same happened with a number control:

[shilman]

Do you have a public repro for this, or can you add one to official-storybook? I played around with this for a minute in next (beta.22) and couldn't repro in https://raw.githubusercontent.com/storybookjs/storybook/next/examples/official-storybook/stories/addon-docs/props.stories.mdx

[matheo]

@shilman wooops,
I forked the ControlsPanel with the exact same code and registered a panel just like @storybook/addon-controls. I thought it should behave the same as the official plugin, but it doesn't then :(

[shilman]

@matheo hmmm did you try recently? might have gotten fixed since you filed this through some other change, since i've been messing with this code a bunch

[matheo]

yeah, I just compared the code of addon-controls and my fork, and they are basically the same.

I will dig a little bit in the argTypes of the controls that are failing to see if there's something missing there.

[shilman]

Thanks! It wouldn't surprise me if there was still a bug, just having trouble repro-ing it! 😄

[shilman]

@matheo I found a repro case in examples/angular-cli, so I don't need one anymore. Fix coming soon!

[matheo]

I checked some stories of angular-cli and there was no error thrown, so I got surprised :P

[stale]

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!

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.21 containing PR #12322 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.

[gregfagan]

I updated to v6.0.21 and this is still happening for me.

[shilman]

@gregfagan Do you have a repro repo you can share?

[gregfagan]

@gregfagan Do you have a repro repo you can share?

Sorry, not at the moment; this is in a private repo

[gregfagan]

Actually this might have been a stale cache or some other problem. It is no longer throwing errors for my. My mistake.

[monolithed]

The same problem with 6.1.0-rc.0.

...
        rotate: {
            description: 'Повернуть элемент (не работает в IE 9)',
            table: {
                type: {
                    summary: 'number'
                },
                defaultValue: {
                    summary: 0
                }
            },
            control: {
                type: 'number'
            }
        },
...

[shilman]

@monolithed does it fix it to add:

        rotate: {
            description: 'Повернуть элемент (не работает в IE 9)',
            defaultValue: 0,
            table: { ... },
            control: { ... },
        }

[monolithed]

@shilman, I have already tried it before. it can be reproduced with the simplest component:

const Input = ({...props}) => (<Input {...props} />);

...
        value: {
            description: 'Input',
            defaultValue: 0,
            table: {
                type: {
                    summary: 'number'
                },
            },
            control: {
                type: 'number'
            }
        }
...

[kevinzang]

I get this error on 6.1.18, but manually setting defaultValue: 0 does fix it. The autogenerated argTypes from react-docgen has defaultValue: '0'.

[shilman]

@kevinzang can you try in 6.2-beta? we recently fixed a bunch of bugs around default value handling

[kevinzang]

@shilman with 6.2.0-beta.3 I can still reproduce this error in two ways:

1. With a required number prop, I see the error as soon as I navigate from another story (Default) to one that uses controls (WithControls).

Sample code

foo.js

import PropTypes from 'prop-types';
import React from 'react';

export default class Foo extends React.Component {
    static propTypes = {
        foo: PropTypes.number.isRequired,
    };

    render() {
        return this.props.foo;
    }
}

foo.stories.js

import React from 'react';

import Foo from './foo';

export default {title: 'Foo', component: Foo};

export const Default = () => <Foo foo={10} />;

export const WithControls = args => <Foo {...args} />;

WithControls.args = {foo: 10};

2. With an optional number prop, the above issue doesn't happen (which is probably what you fixed), but the error still happens when I empty the control.

Sample code

Change the Foo component from the above sample code to

static propTypes = {
    foo: PropTypes.number,
};

static defaultProps = {
    foo: 0,
};

Demo

[anilanar]

I can reproduce this using v6.2.5 with react-docgen-typescript via 0 config setup, for React properties that are optional and whose types are number.

[miniskylab]

I can reproduce this too using v6.2.9 with react-docgen-typescript
I used the below piece of code:

// file name: component.stories.mdx

<Story
    name="Bug"
    argTypes={{
        test: {
            control: {
                type: "number"
            }
        }
    }}
>
    {args => <div>bug</div>}
</Story>

Screenshot:

Initially, Storybook rendered a blank numeric input field control and the console was empty. However, when I typed 1 in the numeric input field control the error appeared.

[simlmx]

Adding a default value for the option fixes it for me:

 export default {
   component: SomeComponent,
   title: "Components/SomeComponent",
   argTypes: {
     myNumber: {
       control: {
         type: "range",
         min: 2,
         max: 7,
       },
     }
   },
   // This next blob is the fix!
   args: {
     myNumber: 5,
   },
 };