For checkboxes in forms, allow a checked state to be provided [#15349…

…5603] Signed-off-by: Jonathan Berney <jberney@pivotal.io>
pivotal-cf · Dec 7, 2017 · cb74815 · cb74815
1 parent 006aaa7
commit cb74815
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/spec/pivotal-ui-react/form/form-col_spec.js b/spec/pivotal-ui-react/form/form-col_spec.js
@@ -57,15 +57,15 @@ describe('FormCol', () => {
   });
 
   describe('when the element is a checkbox', () => {
-    let state, onChangeCheckbox, innerOnChange, checkbox;
+    let state, onChangeCheckbox, innerOnChange, checkbox, subject;
 
     beforeEach(() => {
       checkbox = <input type="checkbox"/>;
       state = {current: {checkboxName: true}};
       innerOnChange = () => 'changed';
       onChangeCheckbox = jasmine.createSpy('onChangeCheckbox').and.returnValue(innerOnChange);
 
-      ReactDOM.render(<FormCol name="checkboxName" state={state} onChangeCheckbox={onChangeCheckbox}>
+      subject = ReactDOM.render(<FormCol name="checkboxName" state={state} onChangeCheckbox={onChangeCheckbox}>
         {checkbox}
       </FormCol>, root);
     });
@@ -78,6 +78,22 @@ describe('FormCol', () => {
         onChange: innerOnChange
       });
     });
+
+    describe('when a checked state is passed', () => {
+      beforeEach(() => {
+        checkbox = <input type="checkbox" checked={false}/>;
+        subject::setProps({children: checkbox});
+      });
+
+      it('passes in the correct props to the cloned element', () => {
+        expect(React.cloneElement).toHaveBeenCalledWith(checkbox, {
+          name: 'checkboxName',
+          id: 'some-unique-string',
+          checked: false,
+          onChange: innerOnChange
+        });
+      });
+    });
   });
 
   describe('clones the element with extra props', () => {

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