[Bug] A component is changing an uncontrolled input of type checkbox to be controlled

Question

[Bug] A component is changing an uncontrolled input of type checkbox to be controlled

rb-mwindh opened this issue 3 years ago · 0 comments

Describe the bug

I get the following error message in the browser console, when checking the checkbox for a css resource:

vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80555 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by CssResourcePanel)
    in label (created by CssResourcePanel)
    in div (created by CssResourcePanel)
    in div (created by CssResourcePanel)
    in CssResourcePanel
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
printWarning @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80555
error @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80527
updateWrapper @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:82337
updateProperties @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:86727
commitUpdate @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:88020
commitWork @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:101013
commitMutationEffects @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:103243
callCallback @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80655
invokeGuardedCallbackDev @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80704
invokeGuardedCallback @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80759
commitRootImpl @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102976
unstable_runWithPriority @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:112238
runWithPriority$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91506
commitRoot @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102848
finishSyncRender @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102274
performSyncWorkOnRoot @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102260
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91556
unstable_runWithPriority @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:112238
runWithPriority$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91506
flushSyncCallbackQueueImpl @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91551
flushSyncCallbackQueue @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91539
flushPendingDiscreteUpdates @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102314
flushDiscreteUpdates @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102294
finishEventHandler @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:81231
batchedEventUpdates @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:81265
dispatchEventForLegacyPluginEventSystem @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:84035
attemptToDispatchEvent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:84734
dispatchEvent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:84656
unstable_runWithPriority @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:112238
runWithPriority$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91506
discreteUpdates$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102354
discreteUpdates @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:81273
dispatchDiscreteEvent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:84635
Show 3 more frames

Steps to reproduce the behavior

Setup Angular 12 app with Storybook 6 and addon-cssresources plugin
Setup a sample story with a single css-resource
Navigate to the story
Check the css-resource checkbox control
Open browser console (F12)
See error

Expected behavior

Error should not occur

Screenshots and/or logs

Please note that screenshots will vanish after 6 months (~19.04.2022)

Environment

OS: Windows 10
Node.js version: v14.17.6
NPM version: 6.14.15
Browser (if applicable): chrome
Browser version (if applicable): 94.0.4606.81 (Official Build) (64Bit)
Device (if applicable): Notebook
Libraries
- @angular/core 12.2.10
- @storybook/core 6.3.12
- @storybook/addon-cssresources 6.2.9 (latest, at the time being)
- react 16.14.0

Additional context

n/a