diff --git a/examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/__snapshots__/index.stories.storyshot b/examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/__snapshots__/index.stories.storyshot new file mode 100644 index 000000000000..dfc34df7a84f --- /dev/null +++ b/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`] = ` +
+ Disabled: false +
+`; diff --git a/examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/component.vue b/examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/component.vue new file mode 100644 index 000000000000..6ca3dd05d936 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/component.vue @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/index.stories.js b/examples/vue-kitchen-sink/src/stories/issues/11839-undefined-bolean-prop/index.stories.js new file mode 100644 index 000000000000..c63b77fe2d22 --- /dev/null +++ b/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: '', // this will log out `false` + template: '', // this will log out `undefined` + }; +}; diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx index 236c571e2c61..f926ad4e27e0 100644 --- a/lib/components/src/controls/Boolean.tsx +++ b/lib/components/src/controls/Boolean.tsx @@ -86,7 +86,7 @@ export const BooleanControl: FC = ({ name, value, onChange, onBlur id={name} type="checkbox" onChange={(e) => onChange(e.target.checked)} - checked={value} + checked={value || false} {...{ name, onBlur, onFocus }} /> True