Merge pull request #5670 from formio/fix/FIO-8461_5x_fix_checkbox_wit…

…h_radio_input_type_submission_issue

FIO-8461: Fixes checkbox with radio input type not present in submission on 5.x renderer

src/components/checkbox/Checkbox.js

@@ -133,7 +133,7 @@ export default class CheckBoxComponent extends Field {
   }
 
   get emptyValue() {
-    return this.component.inputType === 'radio' ? null : false;
+    return this.component.inputType === 'radio' ? '' : false;
   }
 
   isEmpty(value = this.dataValue) {

src/components/checkbox/Checkbox.unit.js

@@ -11,7 +11,8 @@ import {
   comp2,
   comp3,
   comp4,
-  comp5
+  comp5,
+  comp6
 } from './fixtures';
 
 describe('Checkbox Component', () => {
@@ -64,6 +65,34 @@ describe('Checkbox Component', () => {
     });
   });
 
+  it('Should be able to submit default checkbox data with the radio input type', (done) => {
+    const form = _.cloneDeep(comp6);
+    const element = document.createElement('div');
+    const inputName = form.components[0].name;
+
+    Formio.createForm(element, form).then(form => {
+      const submit = form.getComponent('submit');
+      const clickEvent = new Event('click');
+      const submitBtn = submit.refs.button;
+      submitBtn.dispatchEvent(clickEvent);
+
+      setTimeout(() => {
+        assert.equal(form.submission.data[inputName], '');
+        const radioCheckBox = form.getComponent('checkbox');
+        const radio = Harness.testElements(radioCheckBox, 'input[type="radio"]', 1)[0];
+        Harness.clickElement(radioCheckBox, radio);
+        setTimeout(() => {
+          assert.equal(form.submission.data[inputName], 'ok');
+          Harness.clickElement(radioCheckBox, radio);
+          setTimeout(() => {
+            assert.equal(form.submission.data[inputName], '');
+            done();
+          }, 200);
+         }, 200);
+       }, 200);
+    }).catch((err) => done(err));
+  });
+
   it('Should render red asterisk for preview template of the modal required checkbox ', (done) => {
     Harness.testCreate(CheckBoxComponent, comp3).then((component) => {
       const label = component.element.querySelector('.control-label');

src/components/checkbox/fixtures/comp6.js

@@ -0,0 +1,30 @@
+export default
+  {
+    name: 'ckeckbox',
+    path: 'ckeckbox',
+    type: 'form',
+    display: 'form',
+
+    components: [
+      {
+        label: 'Checkbox',
+        inputType: 'radio',
+        tableView: false,
+        defaultValue: false,
+        key: 'checkbox',
+        type: 'checkbox',
+        name: 'some name',
+        value: 'ok',
+        input: true,
+        'some name': false
+      },
+      {
+        type: 'button',
+        label: 'Submit',
+        key: 'submit',
+        disableOnInvalid: true,
+        input: true,
+        tableView: false
+      }
+    ],
+  };

src/components/checkbox/fixtures/index.js

@@ -4,4 +4,5 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
-export { comp1, comp2, comp3, comp4, comp5, customDefaultComponent };
+import comp6 from './comp6';
+export { comp1, comp2, comp3, comp4, comp5, comp6, customDefaultComponent };

src/components/textfield/TextField.unit.js

@@ -808,8 +808,7 @@ describe('TextField Component', () => {
 
     const testMask = async (mask, valid) => {
       const values = valid ? mask.valueValid : mask.valueInvalid;
-      for (let i = 0; i < values.length; i++) {
-        const value = values[i];
+      for (const value of values) {
         const element = document.createElement('div');
         const instance = await Formio.createForm(element, form);
         instance.setPristine(false);
@@ -838,8 +837,7 @@ describe('TextField Component', () => {
       }
     };
 
-    for (let i = 0; i < masks.length; i++) {
-      const mask = masks[i];
+    for (const mask of masks) {
       await testMask(mask, true);
       await testMask(mask, false);
     }