Merge pull request #1225 from data-driven-forms/fix-sequence-initial-value

fix(renderer): Do not override initial values with set values.

Author: Hyperkid123

packages/react-form-renderer/demo/index.js

@@ -6,15 +6,59 @@ import { FormRenderer } from '../src';
 import FormTemplate from './form-template';
 import mapper from './form-fields-mapper';
 
+const schema = {
+  title: 'Sequence condition',
+  fields: [
+    {
+      component: 'text-field',
+      name: 'field-1',
+      label: 'first name',
+    },
+    {
+      component: 'text-field',
+      name: 'field-2',
+      label: 'last name',
+    },
+    {
+      component: 'text-field',
+      name: 'field-3',
+      label: 'occupation',
+      condition: {
+        sequence: [
+          {
+            and: [
+              { when: 'field-1', is: 'james' },
+              { when: 'field-2', is: 'bond' },
+            ],
+            then: { set: { 'field-3': 'SPY' } },
+            else: { visible: true },
+          },
+          {
+            and: [
+              { when: 'field-1', is: 'steve' },
+              { when: 'field-2', is: 'jobs' },
+            ],
+            then: { set: { 'field-3': 'CEO' } },
+            else: { visible: true },
+          },
+        ],
+      },
+    },
+  ],
+};
 const App = () => {
   return (
     <div style={{ padding: 20 }}>
       <FormRenderer
+        initialValues={{
+          'field-1': 'steve',
+          'field-2': 'jobs',
+          'field-3': 'RETIRED',
+        }}
         componentMapper={mapper}
         onSubmit={console.log}
         FormTemplate={FormTemplate}
-        schema={{ fields: [{ component: 'text-field', name: 'text' }] }}
-        subscription={{ pristine: false }}
+        schema={schema}
       />
     </div>
   );

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

@@ -47,11 +47,20 @@ const Condition = React.memo(
         setters.forEach((setter, index) => {
           if (setter && (state.initial || !isEqual(setter, state.sets[index]))) {
             setTimeout(() => {
-              formOptions.batch(() => {
-                Object.entries(setter).forEach(([name, value]) => {
-                  formOptions.change(name, value);
+              /**
+               * We have to get the meta in the timetout to wait for state initialization
+               */
+              const meta = formOptions.getFieldState(field.name);
+              /**
+               * Apply setter only on modfied fields or on fields with no initial value.
+               */
+              if (typeof meta.initial === 'undefined' || meta.modified) {
+                formOptions.batch(() => {
+                  Object.entries(setter).forEach(([name, value]) => {
+                    formOptions.change(name, value);
+                  });
                 });
-              });
+              }
             });
           }
         });

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

@@ -183,6 +183,78 @@ describe('condition test', () => {
     });
   });
 
+  it('should not override initial value with setter value', async () => {
+    const schema = {
+      fields: [
+        {
+          component: 'text-field',
+          name: 'field-1',
+          label: 'first name',
+        },
+        {
+          component: 'text-field',
+          name: 'field-2',
+          label: 'last name',
+        },
+        {
+          component: 'text-field',
+          name: 'field-3',
+          label: 'occupation',
+          condition: {
+            sequence: [
+              {
+                and: [
+                  { when: 'field-1', is: 'james' },
+                  { when: 'field-2', is: 'bond' },
+                ],
+                then: { set: { 'field-3': 'SPY' } },
+                else: { visible: true },
+              },
+              {
+                and: [
+                  { when: 'field-1', is: 'steve' },
+                  { when: 'field-2', is: 'jobs' },
+                ],
+                then: { set: { 'field-3': 'CEO' } },
+                else: { visible: true },
+              },
+            ],
+          },
+        },
+      ],
+    };
+
+    render(
+      <FormRenderer
+        {...initialProps}
+        schema={schema}
+        initialValues={{
+          'field-1': 'steve',
+          'field-2': 'jobs',
+          'field-3': 'RETIRED',
+        }}
+      />
+    );
+
+    await act(async () => {
+      jest.advanceTimersByTime(1);
+    });
+
+    expect(screen.getByLabelText('field-3')).toBeInTheDocument();
+
+    await act(async () => {
+      jest.advanceTimersByTime(10);
+    });
+
+    userEvent.click(screen.getByText('Submit'));
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      'field-1': 'steve',
+      'field-2': 'jobs',
+      'field-3': 'RETIRED',
+    });
+  });
+
   it('sets value when condition is fulfill on reset', async () => {
     schema = {
       fields: [