Merge pull request #108 from formio/FIO-8512-fixed-data-unset-for-con…

…ditional-components-inside-layouts-inside-editGrid FIO-8512: fixed an issue where conditionally visible data inside layout components inside editGrid/dataGrid is unset on server side
formio · Jun 27, 2024 · 7b67d3e · 7b67d3e
2 parents 6c50a6a + 8205936
commit 7b67d3e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 6 deletions.
diff --git a/src/utils/__tests__/formUtil.test.ts b/src/utils/__tests__/formUtil.test.ts
@@ -19,7 +19,8 @@ import {
     findComponent,
     findComponents,
     getComponent,
-    flattenComponents
+    flattenComponents,
+    getComponentActualValue
 } from "../formUtil";
 import { fastCloneDeep } from 'utils/fastCloneDeep';
 
@@ -1747,3 +1748,51 @@ describe('eachComponentData', () => {
         ]);
     });
 });
+
+describe('getComponentActualValue', () => {
+    it('Should return correct value for component inside inside panel inside editGrid', () => {
+      const component = {
+        label: 'Radio',
+        optionsLabelPosition: 'right',
+        inline: false,
+        tableView: false,
+        values: [
+          { label: 'yes', value: 'yes', shortcut: '' },
+          { label: 'no', value: 'no', shortcut: '' },
+        ],
+        key: 'radio',
+        type: 'radio',
+        input: true,
+        path: 'editGrid.radio',
+        parent: {
+          collapsible: false,
+          key: 'panel',
+          type: 'panel',
+          label: 'Panel',
+          input: false,
+          tableView: false,
+          path: 'editGrid[0].panel',
+          parent: {
+            label: 'Edit Grid',
+            tableView: false,
+            rowDrafts: false,
+            key: 'editGrid',
+            type: 'editgrid',
+            path: 'editGrid',
+            displayAsTable: false,
+            input: true,
+          },
+        },
+      };
+      const compPath = 'editGrid.radio';
+      const data = {
+        editGrid: [{ radio: 'yes', textArea: 'test' }],
+        submit: true,
+      };
+      const row = { radio: 'yes', textArea: 'test' };
+
+      const value = getComponentActualValue(component, compPath, data, row);
+      expect(value).to.equal('yes');
+    });
+  });
+
diff --git a/src/utils/conditions.ts b/src/utils/conditions.ts
@@ -1,6 +1,6 @@
 import { ConditionsContext, JSONConditional, LegacyConditional, SimpleConditional } from "types";
 import { EvaluatorFn, evaluate, JSONLogicEvaluator } from 'modules/jsonlogic';
-import { getComponentActualValue } from "./formUtil";
+import { getComponent, getComponentActualValue } from "./formUtil";
 import { has, isObject, map, every, some, find, filter } from 'lodash';
 import ConditionOperators from './operators';
 
@@ -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 } = context;
+    const { component, data, row, instance, form } = context;
     if (!conditional || !isSimpleConditional(conditional)) {
         return null;
     }
@@ -110,7 +110,10 @@ export function checkSimpleConditional(conditional: SimpleConditional, context:
             // Ignore conditions if there is no component path.
             return null;
         }
-        const value = getComponentActualValue(component, conditionComponentPath, data, row);
+
+        const conditionComp = getComponent(form?.components || [], conditionComponentPath, true);
+        const value = conditionComp ? getComponentActualValue(conditionComp, conditionComponentPath, data, row) : null;
+
         const ConditionOperator = ConditionOperators[operator];
         return ConditionOperator
             ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })

diff --git a/src/utils/formUtil.ts b/src/utils/formUtil.ts
@@ -596,8 +596,18 @@ export function getComponentActualValue(component: Component, compPath: string,
   //
   //   a[0].b[2].c[3].d => a.b.c.d
   //
-  if (component.parent?.path) {
-    const parentCompPath = component.parent?.path.replace(/\[[0-9]+\]/g, '');
+  let parentInputComponent: any = null;
+  let parent = component;
+
+  while (parent?.parent?.path && !parentInputComponent) {
+    parent = parent.parent;
+    if (parent.input) {
+      parentInputComponent = parent;
+    }
+  }
+
+  if (parentInputComponent) {
+    const parentCompPath = parentInputComponent.path.replace(/\[[0-9]+\]/g, '');
     compPath = compPath.replace(parentCompPath, '');
     compPath = trim(compPath, '. ');
   }