Merge pull request #12322 from storybookjs/11839-undefined-boolean-prop

Addon-controls: Fix uncontrolled to controlled warning for booleans

examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/__snapshots__/index.stories.storyshot

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Issues/11839 undefined boolean Primary 1`] = `
+<div>
+  Disabled: false
+</div>
+`;

examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/component.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>Disabled: {{disabled}}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: Boolean,
+  },
+  mounted() {
+    console.log(this.disabled); // notice this line
+  },
+};
+</script>

examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/index.stories.js

@@ -0,0 +1,15 @@
+import Comp from './component.vue';
+
+export default {
+  title: 'Issues/11839 undefined boolean',
+  component: Comp,
+};
+
+export const Primary = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { Comp },
+    // template: '<Comp />', // this will log out `false`
+    template: '<Comp v-bind="$props" />', // this will log out `undefined`
+  };
+};

lib/components/src/controls/Boolean.tsx

@@ -86,7 +86,7 @@ export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur
       id={name}
       type="checkbox"
       onChange={(e) => onChange(e.target.checked)}
-      checked={value}
+      checked={value || false}
       {...{ name, onBlur, onFocus }}
     />
     <span>True</span>