storybook: Controls: boolean control throws a red warning

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

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 1
Comments: 23 (12 by maintainers)

Most upvoted comments

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

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};

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

controlled-to-uncontrolled

kevinzang on Feb 25, 2021

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'.

kevinzang on Feb 25, 2021

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

gregfagan on Sep 4, 2020

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

shilman on Jun 9, 2020