FIO-8807: fixed an issue where conditionals based on selectBoxes comp…

…onent do not work (#131)
formio · Aug 13, 2024 · 0002586 · 0002586
1 parent 8ecadf8
commit 0002586
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 12 deletions.
diff --git a/src/process/conditions/__tests__/conditions.test.ts b/src/process/conditions/__tests__/conditions.test.ts
@@ -2,6 +2,7 @@ import { expect } from 'chai';
 import { processSync } from '../../process'
 import { conditionProcessInfo } from '../index';
 import { ConditionsScope, ProcessContext } from 'types';
+import { get } from 'lodash';
 
 const processForm = (form: any, submission: any) => {
     const context: ProcessContext<ConditionsScope> = {
@@ -51,4 +52,91 @@ describe('Condition processor', () => {
         expect(context.components[1]).to.haveOwnProperty('hidden');
         expect(context.components[1].hidden).to.be.true;
     });
+
+    it('Should not define a conditional component (that condition is based on selectBoxes value) as hidden', async () => {
+      const form1 = {
+        components: [
+          {
+            label: 'Select Boxes',
+            optionsLabelPosition: 'right',
+            tableView: false,
+            defaultValue: {
+              '1': false,
+              '2': false,
+              '3': false,
+              test3: false,
+            },
+            values: [
+              {
+                label: '1',
+                value: '1',
+                shortcut: '',
+              },
+              {
+                label: '2',
+                value: '2',
+                shortcut: '',
+              },
+              {
+                label: '3',
+                value: '3',
+                shortcut: '',
+              },
+            ],
+            validateWhenHidden: false,
+            key: 'selectBoxes',
+            type: 'selectboxes',
+            input: true,
+            inputType: 'checkbox',
+          },
+          {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            validateWhenHidden: false,
+            key: 'textField',
+            conditional: {
+              show: true,
+              conjunction: 'all',
+              conditions: [
+                {
+                  component: 'selectBoxes',
+                  operator: 'isEqual',
+                  value: '3',
+                },
+              ],
+            },
+            type: 'textfield',
+            input: true,
+          },
+          {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+          },
+        ],
+      };
+
+      const submission1 = {
+        data: {
+          selectBoxes: {
+            '1': false,
+            '2': false,
+            '3': true,
+          },
+          textField: 'test',
+          submit: true,
+        },
+      };
+
+      const context: ProcessContext<ConditionsScope> = processForm(
+        form1,
+        submission1
+      );
+
+      expect(get(context, 'scope.conditionals[0].conditionallyHidden')).to.be.false;
+    });
 });
diff --git a/src/utils/conditions.ts b/src/utils/conditions.ts
@@ -95,7 +95,7 @@ export function checkJsonConditional(conditional: JSONConditional, context: Cond
  * @returns 
  */
 export function checkSimpleConditional(conditional: SimpleConditional, context: ConditionsContext): boolean | null {
-    const { component, data, row, instance, form } = context;
+    const { component, data, row, instance, form, components = [] } = context;
     if (!conditional || !isSimpleConditional(conditional)) {
         return null;
     }
@@ -111,12 +111,12 @@ export function checkSimpleConditional(conditional: SimpleConditional, context:
             return null;
         }
 
-        const conditionComp = getComponent(form?.components || [], conditionComponentPath, true);
-        const value = conditionComp ? getComponentActualValue(conditionComp, conditionComponentPath, data, row) : null;
+        const conditionComponent = getComponent(form?.components || components, conditionComponentPath, true);
+        const value = conditionComponent ? getComponentActualValue(conditionComponent, conditionComponentPath, data, row) : null;
 
         const ConditionOperator = ConditionOperators[operator];
         return ConditionOperator
-            ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+            ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponent, conditionComponentPath })
             : true;
     }), (res) => (res !== null));
 

diff --git a/src/utils/operators/IsEqualTo.js b/src/utils/operators/IsEqualTo.js
@@ -1,5 +1,5 @@
 import ConditionOperator from './ConditionOperator';
-import { isString, isObject, isEqual } from 'lodash';
+import { isString, isObject, isEqual, get } from 'lodash';
 
 export default class IsEqualTo extends ConditionOperator {
     static get operatorKey() {
@@ -10,7 +10,12 @@ export default class IsEqualTo extends ConditionOperator {
         return 'Is Equal To';
     }
 
-    execute({ value, comparedValue }) {
+    execute({ value, comparedValue, conditionComponent }) {
+        // special check for select boxes
+        if (conditionComponent?.type === 'selectboxes') {
+            return get(value, comparedValue, false);
+        }
+
         if (value && comparedValue && typeof value !== typeof comparedValue && isString(comparedValue)) {
             try {
                 comparedValue = JSON.parse(comparedValue);
@@ -19,11 +24,6 @@ export default class IsEqualTo extends ConditionOperator {
             catch (e) {}
         }
 
-        //special check for select boxes
-        if (isObject(value) && comparedValue && isString(comparedValue)) {
-            return value[comparedValue];
-        }
-
-        return  isEqual(value, comparedValue);
+        return isEqual(value, comparedValue);
     }
 }