Merge pull request #1231 from rvsia/cloneValuesInCondition

Deep clone values in condition to prevent reference issues

Author: Hyperkid123

packages/react-form-renderer/src/form-renderer/render-form.js

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import setWith from 'lodash/setWith';
+import cloneDeep from 'lodash/cloneDeep';
 import { Field } from 'react-final-form';
 import RendererContext from '../renderer-context';
 import Condition from '../condition';
@@ -47,7 +48,7 @@ const ConditionTriggerDetector = ({ values = {}, triggers = [], children, condit
       {({ input: { value } }) => (
         <ConditionTriggerDetector
           triggers={[...internalTriggers]}
-          values={setWith({ ...values }, name, value, Object)}
+          values={setWith(cloneDeep(values), name, value, Object)}
           condition={condition}
           field={field}
         >

packages/react-form-renderer/src/tests/form-renderer/condition.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import FormTemplate from '../../../../../__mocks__/mock-form-template';
@@ -468,6 +468,59 @@ describe('condition test', () => {
     expect(() => screen.getByLabelText('field-2')).toThrow();
   });
 
+  it('should handle nested complex coniditions', async () => {
+    const schema = {
+      fields: [
+        {
+          component: 'text-field',
+          name: 'info.name.last',
+          label: 'last name',
+        },
+        {
+          component: 'text-field',
+          name: 'info.name.father',
+          label: 'Father name',
+        },
+        {
+          component: 'text-field',
+          name: 'info.name.equipment',
+          label: 'Equipment name',
+        },
+        {
+          component: 'text-field',
+          name: 'info.occupation',
+          label: 'occupation',
+          condition: {
+            sequence: [
+              {
+                and: [
+                  {
+                    or: [
+                      { when: 'info.name.father', is: 'Charles' },
+                      { when: 'info.name.equipment', is: 'Gun' },
+                    ],
+                  },
+                  { when: 'info.name.last', is: 'Bond' },
+                ],
+                then: {
+                  set: { 'info.occupation': 'SPY' },
+                },
+                else: { visible: true },
+              },
+            ],
+          },
+        },
+      ],
+    };
+
+    render(<FormRenderer {...initialProps} schema={schema} />);
+
+    userEvent.type(screen.getByLabelText('info.name.last'), 'Bond');
+    userEvent.type(screen.getByLabelText('info.name.equipment'), 'Gun');
+
+    await waitFor(() => expect(screen.getByLabelText('info.occupation')).toHaveValue('SPY'));
+  });
+
   describe('reducer', () => {
     it('returns default', () => {
       const initialState = {