FIO-7956: fixed an iisued wehre simple condition based on stringified…

… checkbox value is not executed correctly (#5527)
formio · Mar 14, 2024 · 877ce32 · 877ce32
1 parent 91617ed
commit 877ce32
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git a/src/Webform.unit.js b/src/Webform.unit.js
@@ -3033,6 +3033,24 @@ describe('Webform tests', function() {
         })
         .catch(done);
     });
+
+    it('Should hide field if the checkbox based condition with string value is met', function(done) {
+      const formElement = document.createElement('div');
+      const form = new Webform(formElement);
+      const formCopy = fastCloneDeep(formsWithNewSimpleConditions.form7);
+
+      form.setForm(formCopy).then(() => {
+        const conditionalComponent = form.getComponent('textField');
+        assert.equal(conditionalComponent.visible, true, 'Component should be conditionally visible');
+
+        form.setValue({ data: { checkbox: true } });
+
+        setTimeout(() => {
+          assert.equal(conditionalComponent.visible, false, 'Component should be conditionally hidden');
+          done();
+        }, 300);
+      }).catch((err) => done(err));
+    });
   });
 
   describe('Calculate Value with allowed manual override', () => {

diff --git a/src/utils/conditionOperators/IsEqualTo.js b/src/utils/conditionOperators/IsEqualTo.js
@@ -12,7 +12,7 @@ export default class IsEqualTo extends ConditionOperator {
     }
 
     execute({ value, comparedValue, instance, conditionComponentPath }) {
-        if (value && comparedValue && typeof value !== typeof comparedValue && _.isString(comparedValue)) {
+        if ((value || value === false) && comparedValue && typeof value !== typeof comparedValue && _.isString(comparedValue)) {
             try {
                 comparedValue = JSON.parse(comparedValue);
             }

diff --git a/test/forms/formsWithNewSimpleConditions.js b/test/forms/formsWithNewSimpleConditions.js
@@ -1022,11 +1022,53 @@ const form6 = {
   machineName: 'cpxkpoxmfvhivle:selectBoxesCond',
 };
 
+const form7 = {
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Checkbox',
+      tableView: false,
+      key: 'checkbox',
+      type: 'checkbox',
+      input: true,
+    },
+    {
+      label: 'Text Field',
+      applyMaskOn: 'change',
+      tableView: true,
+      key: 'textField',
+      conditional: {
+        show: true,
+        conjunction: 'all',
+        conditions: [
+          {
+            component: 'checkbox',
+            operator: 'isEqual',
+            value: 'false',
+          },
+        ],
+      },
+      type: 'textfield',
+      input: true,
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false,
+    },
+  ],
+};
+
 export default {
   form1,
   form2,
   form3,
   form4,
   form5,
-  form6
+  form6,
+  form7
 };