Coerce checked property of checkboxes within Forms to be booleans [#1…

…54579887] Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>
pivotal-cf · Jan 26, 2018 · f51a206 · f51a206
1 parent d4b78d1
commit f51a206
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/spec/pivotal-ui-react/form/form-col_spec.js b/spec/pivotal-ui-react/form/form-col_spec.js
@@ -61,7 +61,7 @@ describe('FormCol', () => {
 
     beforeEach(() => {
       checkbox = <input type="checkbox"/>;
-      state = {current: {checkboxName: true}};
+      state = {current: {}};
       innerOnChange = () => 'changed';
       onChangeCheckbox = jasmine.createSpy('onChangeCheckbox').and.returnValue(innerOnChange);
 
@@ -74,11 +74,27 @@ describe('FormCol', () => {
       expect(React.cloneElement).toHaveBeenCalledWith(checkbox, {
         name: 'checkboxName',
         id: 'some-unique-string',
-        checked: true,
+        checked: false,
         onChange: innerOnChange
       });
     });
 
+    describe('when the value is true in the state', () => {
+      beforeEach(() => {
+        state = {current: {checkboxName: true}};
+        subject::setProps({state});
+      });
+
+      it('passes in the correct props to the cloned element', () => {
+        expect(React.cloneElement).toHaveBeenCalledWith(checkbox, {
+          name: 'checkboxName',
+          id: 'some-unique-string',
+          checked: true,
+          onChange: innerOnChange
+        });
+      });
+    });
+
     describe('when a checked state is passed', () => {
       beforeEach(() => {
         checkbox = <input type="checkbox" checked={false}/>;

diff --git a/src/react/forms/form-col.js b/src/react/forms/form-col.js
@@ -63,7 +63,7 @@ export class FormCol extends React.Component {
       if (name) {
         const isCheckbox = element.props.type === 'checkbox';
         if (isCheckbox) {
-          props.checked = element.props.hasOwnProperty('checked') ? element.props.checked : (state.current && state.current[name]);
+          props.checked = !!(element.props.hasOwnProperty('checked') ? element.props.checked : (state.current && state.current[name]));
           props.onChange = element.props.onChange || onChangeCheckbox(name);
         } else {
           props.value = element.props.hasOwnProperty('value') ? element.props.value : (state.current && state.current[name]);