Fix initial render set by using setTimeout

Author: rvsia

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

@@ -87,38 +87,45 @@ export const parseCondition = (condition, values) => {
   return negativeResult;
 };
 
-const Condition = React.memo(({ condition, children, values }) => {
-  const formOptions = useFormApi();
-  const dirty = formOptions.getState().dirty;
-
-  const [lastSets, setSets] = React.useState([]);
-
-  const conditionResult = parseCondition(condition, values, formOptions);
-  const setters = conditionResult.set ? [conditionResult.set] : conditionResult.sets;
-
-  useEffect(() => {
-    if (!dirty) {
-      setSets([]);
-    }
-  }, [dirty]);
-
-  useEffect(() => {
-    if (setters && setters.length > 0 && (!dirty || !isEqual(setters, lastSets))) {
-      setters.forEach((setter, index) => {
-        if (setter && (!dirty || !isEqual(setter, lastSets[index]))) {
-          formOptions.batch(() => {
-            Object.entries(setter).forEach(([name, value]) => {
-              formOptions.change(name, value);
+const Condition = React.memo(
+  ({ condition, children, values }) => {
+    const formOptions = useFormApi();
+    const dirty = formOptions.getState().dirty;
+
+    const [lastSets, setSets] = React.useState([]);
+    const [initial, setInitial] = React.useState(true);
+
+    const conditionResult = parseCondition(condition, values, formOptions);
+    const setters = conditionResult.set ? [conditionResult.set] : conditionResult.sets;
+
+    useEffect(() => {
+      if (!dirty) {
+        setInitial(true);
+      }
+    }, [dirty]);
+
+    useEffect(() => {
+      if (setters && setters.length > 0 && (initial || !isEqual(setters, lastSets))) {
+        setters.forEach((setter, index) => {
+          if (setter && (initial || !isEqual(setter, lastSets[index]))) {
+            setTimeout(() => {
+              formOptions.batch(() => {
+                Object.entries(setter).forEach(([name, value]) => {
+                  formOptions.change(name, value);
+                });
+              });
             });
-          });
-        }
-      });
-      setSets(setters);
-    }
-  }, [setters, dirty]);
-
-  return conditionResult.visible ? children : null;
-}, isEqual);
+          }
+        });
+        setSets(setters);
+        setInitial(false);
+      }
+    }, [setters, initial]);
+
+    return conditionResult.visible ? children : null;
+  },
+  (a, b) => isEqual(a.values, b.values) && isEqual(a.condition, b.condition)
+);
 
 const conditionProps = {
   when: PropTypes.string,

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 
 import FormTemplate from '../../../../../__mocks__/mock-form-template';
 import componentTypes from '../../../dist/cjs/component-types';
@@ -18,6 +19,8 @@ describe('condition test', () => {
   let wrapper;
 
   beforeEach(() => {
+    jest.useFakeTimers();
+
     onSubmit = jest.fn();
 
     initialProps = {
@@ -67,7 +70,7 @@ describe('condition test', () => {
     expect(wrapper.find('input')).toHaveLength(1);
   });
 
-  it('sets value when condition is fulfill', () => {
+  it('sets value when condition is fulfill', async () => {
     schema = {
       fields: [
         {
@@ -90,24 +93,34 @@ describe('condition test', () => {
       ]
     };
 
-    wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
+    await act(async () => {
+      wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
+    });
+    wrapper.update();
 
     expect(wrapper.find('input')).toHaveLength(1);
 
-    wrapper.find('input').simulate('change', { target: { value: 'show' } });
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: 'show' } });
+      jest.advanceTimersByTime(1);
+    });
     wrapper.update();
 
     expect(wrapper.find('input')).toHaveLength(2);
 
-    wrapper.find('form').simulate('submit');
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+      jest.advanceTimersByTime(1);
+    });
+    wrapper.update();
 
     expect(onSubmit).toHaveBeenCalledWith({
       'field-1': 'show',
       'field-2': 'someValue'
     });
   });
 
-  it('sets value when condition is fulfill - initialValues', () => {
+  it('sets value when condition is fulfill - initialValues', async () => {
     schema = {
       fields: [
         {
@@ -130,19 +143,26 @@ describe('condition test', () => {
       ]
     };
 
-    wrapper = mount(<FormRenderer {...initialProps} schema={schema} initialValues={{ 'field-1': 'show' }} />);
+    await act(async () => {
+      wrapper = mount(<FormRenderer {...initialProps} schema={schema} initialValues={{ 'field-1': 'show' }} />);
+      jest.advanceTimersByTime(1);
+    });
+    wrapper.update();
 
     expect(wrapper.find('input')).toHaveLength(2);
 
-    wrapper.find('form').simulate('submit');
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
 
     expect(onSubmit).toHaveBeenCalledWith({
       'field-1': 'show',
       'field-2': 'someValue'
     });
   });
 
-  it('sets value when condition is fulfill on reset', () => {
+  it('sets value when condition is fulfill on reset', async () => {
     schema = {
       fields: [
         {
@@ -165,41 +185,58 @@ describe('condition test', () => {
       ]
     };
 
-    wrapper = mount(<FormRenderer {...initialProps} schema={schema} initialValues={{ 'field-1': 'show' }} />);
+    await act(async () => {
+      wrapper = mount(<FormRenderer {...initialProps} schema={schema} initialValues={{ 'field-1': 'show' }} />);
+      jest.advanceTimersByTime(1);
+    });
+    wrapper.update();
 
     expect(wrapper.find('input')).toHaveLength(2);
 
-    wrapper
-      .find('input')
-      .first()
-      .simulate('change', { target: { value: 'dontshow' } });
+    await act(async () => {
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'dontshow' } });
+      jest.advanceTimersByTime(1);
+    });
     wrapper.update();
 
     expect(wrapper.find('input')).toHaveLength(1);
 
-    wrapper.find('form').simulate('submit');
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
 
     expect(onSubmit).toHaveBeenCalledWith({
       'field-1': 'dontshow',
       'field-2': 'someValue'
     });
-
-    //Reset
-    wrapper
-      .find('button')
-      .at(1)
-      .simulate('click');
+    onSubmit.mockClear();
+
+    await act(async () => {
+      //Reset
+      wrapper
+        .find('button')
+        .at(1)
+        .simulate('click');
+      jest.advanceTimersByTime(1);
+    });
     wrapper.update();
 
-    wrapper.find('form').simulate('submit');
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
 
     expect(onSubmit).toHaveBeenCalledWith({
       'field-1': 'show',
       'field-2': 'someValue'
     });
   });
 
-  it('sets value when condition is fulfill - sequence', () => {
+  it('sets value when condition is fulfill - sequence', async () => {
     schema = {
       fields: [
         {
@@ -245,14 +282,22 @@ describe('condition test', () => {
       ]
     };
 
-    wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
+    await act(async () => {
+      wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
+    });
 
     expect(wrapper.find('input')).toHaveLength(1);
 
-    wrapper.find('input').simulate('change', { target: { value: 'show' } });
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: 'show' } });
+      jest.advanceTimersByTime(1);
+    });
     wrapper.update();
 
-    wrapper.find('form').simulate('submit');
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
 
     expect(onSubmit).toHaveBeenCalledWith({
       'field-1': 'show',