FIO-9120: Fix issue with unchecking radio default value (#5839)

formio · Oct 3, 2024 · 4b6eb05 · 4b6eb05
1 parent 2557168
commit 4b6eb05
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/src/components/radio/Radio.js b/src/components/radio/Radio.js
@@ -93,6 +93,15 @@ export default class RadioComponent extends ListComponent {
     return defaultValue;
   }
 
+  resetValue() {
+    this.unset();
+    this.setValue(this.emptyValue, {
+      noUpdateEvent: true,
+      noValidate: true,
+      resetValue: true
+    });
+  }
+
   get inputInfo() {
     const info = super.elementInfo();
     info.type = 'input';
@@ -149,15 +158,15 @@ export default class RadioComponent extends ListComponent {
     this.loadedOptions = [];
 
     if (!this.visible) {
-      this.itemsLoadedResolve(); 
+      this.itemsLoadedResolve();
     }
 
     // Get the template keys for this radio component.
     this.getTemplateKeys();
   }
 
   beforeSubmit() {
-    return new Promise(res => { 
+    return new Promise(res => {
       this.dataReady.then(() => res(true));
     });
   }

diff --git a/test/unit/Radio.unit.js b/test/unit/Radio.unit.js
@@ -28,6 +28,38 @@ describe('Radio Component', () => {
     });
   });
 
+  it("Should allow to uncheck default radio value and set correct submission data", function (done) {
+    const formElement = document.createElement("div");
+    const comp5Cloned = _.cloneDeep(comp5);
+    comp5Cloned.components[0].defaultValue = "one";
+
+    Formio.createForm(formElement, comp5Cloned)
+      .then((form) => {
+        const submit = form.getComponent("submit");
+        const submitBtn = submit.refs.button;
+        const clickEvent = new Event("click");
+        const component = form.getComponent("radio");
+        const radioFirstInput = component.refs.input[0];
+        setTimeout(() => {
+          submitBtn.dispatchEvent(clickEvent);
+          setTimeout(() => {
+            assert.equal(form.submission.data.radio, 'one');
+            assert.equal(component.refs.input[0].checked, true);
+            radioFirstInput.click();
+            setTimeout(() => {
+              submitBtn.dispatchEvent(clickEvent);
+              setTimeout(() => {
+                assert.equal(form.submission.data.radio, '');
+                assert.equal(component.refs.input[0].checked, false);
+                done();
+              }, 200);
+            }, 200);
+          }, 200);
+        }, 200);
+      })
+      .catch(done);
+  });
+
   it('Should return correct string values if storage type is Number', () => {
     return Harness.testCreate(RadioComponent, comp2).then((component) => {
       assert.equal(component.getValueAsString(1), 'one');