Merge pull request #1234 from rvsia/fixSetterInitial

fix(renderer): fix undefined meta in condition

Author: rvsia

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

@@ -51,10 +51,14 @@ const Condition = React.memo(
                * We have to get the meta in the timetout to wait for state initialization
                */
               const meta = formOptions.getFieldState(field.name);
+              const isFormModified = Object.values(formOptions.getState().modified).some(Boolean);
               /**
-               * Apply setter only on modfied fields or on fields with no initial value.
+               * Apply setter only
+               *    - field has no initial value
+               *    - form is modified
+               *    - when meta is false = field was unmounted before timeout, we finish the condition
                */
-              if (typeof meta.initial === 'undefined' || meta.modified) {
+              if (!meta || isFormModified || typeof meta.initial === 'undefined') {
                 formOptions.batch(() => {
                   Object.entries(setter).forEach(([name, value]) => {
                     formOptions.change(name, value);

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

@@ -468,7 +468,7 @@ describe('condition test', () => {
     expect(() => screen.getByLabelText('field-2')).toThrow();
   });
 
-  it('should handle nested complex coniditions', async () => {
+  it('should handle nested complex conditions', async () => {
     const schema = {
       fields: [
         {
@@ -521,6 +521,45 @@ describe('condition test', () => {
     await waitFor(() => expect(screen.getByLabelText('info.occupation')).toHaveValue('SPY'));
   });
 
+  it('should change field with initial value only when form is modified', async () => {
+    const schema = {
+      fields: [
+        {
+          component: 'text-field',
+          name: 'field1',
+          initialValue: 'B',
+        },
+        {
+          component: 'text-field',
+          name: 'field2',
+          initialValue: 'schema initial value',
+          clearOnUnmount: true,
+          condition: {
+            when: 'field1',
+            is: 'B',
+            then: { set: { field2: 'set with then' } },
+            else: { set: { field2: 'set with else' } },
+          },
+        },
+      ],
+    };
+
+    render(<FormRenderer {...initialProps} schema={schema} />);
+
+    expect(screen.getByLabelText('field2')).toHaveValue('schema initial value');
+
+    userEvent.type(screen.getByLabelText('field2'), '+++');
+
+    expect(screen.getByLabelText('field2')).toHaveValue('schema initial value+++');
+
+    userEvent.clear(screen.getByLabelText('field1'));
+    userEvent.type(screen.getByLabelText('field1'), 'A');
+    userEvent.clear(screen.getByLabelText('field1'));
+    userEvent.type(screen.getByLabelText('field1'), 'B');
+
+    await waitFor(() => expect(screen.getByLabelText('field2')).toHaveValue('set with then'));
+  });
+
   describe('reducer', () => {
     it('returns default', () => {
       const initialState = {

packages/react-renderer-demo/src/pages/schema/condition-set.md

@@ -20,4 +20,6 @@ condition: {
 
 Set is a object consists of field names as keys and values as values. You can change any form field value from any conditional action.
 
+When the field containing a condition has some defined initial value, the setter is not triggered until the setter is retriggered with a different value.
+
 </DocPage>