fix(renderer): allow to pass falsy values in initiliazeOnMount

Author: rvsia

packages/react-form-renderer/src/hooks/use-field-api.js

@@ -15,7 +15,9 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, dat
      * This affects conditional fields
      */
     if (initializeOnMount) {
-      const initialValue = props.initialValue || fieldProps.meta.initial;
+      const initialValue = Object.prototype.hasOwnProperty.call(props, 'initialValue')
+        ? props.initialValue
+        : props.formOptions.getFieldState(props.name).initial;
       fieldProps.input.onChange(initialValue);
     }
   }, [initializeOnMount, props.initialValue, fieldProps.meta.initial, fieldProps.input]);

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

@@ -1016,7 +1016,7 @@ describe('renderForm function', () => {
           component: componentTypes.TEXT_FIELD,
           name: INITIALIZED_FIELD,
           initializeOnMount,
-          initialValue,
+          ...(initialValue ? { initialValue } : {}),
           condition: {
             when: SHOWER_FIELD,
             is: SHOW_VALUE
@@ -1185,67 +1185,135 @@ describe('renderForm function', () => {
     });
 
     it('should set false value in initializeOnMount', () => {
-      layoutMapper = {
-        [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
-        [layoutComponents.BUTTON]: ({ label, ...rest }) =>  <button { ...rest }>{ label }</button>,
-        [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
-        [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
-        [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
+      const schema = {
+        fields: [
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'input'
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'unmounted',
+            initialValue: false,
+            initializeOnMount: true,
+            condition: {
+              when: 'input',
+              is: 'show_false'
+            }
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'unmounted',
+            initialValue: true,
+            initializeOnMount: true,
+            condition: {
+              when: 'input',
+              is: 'show_true'
+            }
+          }
+        ]
       };
 
+      const onSubmit = jest.fn();
+
+      const wrapper = mount(
+        <FormRenderer
+          FormTemplate={(props) => <FormTemplate {...props} />}
+          componentMapper={{
+            [componentTypes.TEXT_FIELD]: TextField
+          }}
+          schema={schema}
+          onSubmit={onSubmit}
+        />
+      );
+
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'show_true' } });
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+
+      expect(onSubmit).toHaveBeenCalledWith({ input: 'show_true', unmounted: true }, expect.any(Object), expect.any(Function));
+      onSubmit.mockClear();
+
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'show_false' } });
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+      wrapper.update();
+
+      expect(onSubmit).toHaveBeenCalledWith({ input: 'show_false', unmounted: false }, expect.any(Object), expect.any(Function));
+    });
+
+    it('should set unefined value in initializeOnMount', () => {
       const schema = {
-        fields: [{
-          component: components.TEXT_FIELD,
-          name: 'input',
-        }, {
-          component: components.TEXT_FIELD,
-          name: 'unmounted',
-          initialValue: false,
-          initializeOnMount: true,
-          condition: {
-            when: 'input',
-            is: 'show_false',
+        fields: [
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'input'
           },
-        }, {
-          component: components.TEXT_FIELD,
-          name: 'unmounted',
-          initialValue: true,
-          initializeOnMount: true,
-          condition: {
-            when: 'input',
-            is: 'show_true',
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'unmounted',
+            initialValue: undefined,
+            initializeOnMount: true,
+            condition: {
+              when: 'input',
+              is: 'show_undef'
+            }
           },
-        }],
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'unmounted',
+            initialValue: true,
+            initializeOnMount: true,
+            condition: {
+              when: 'input',
+              is: 'show_true'
+            }
+          }
+        ]
       };
 
       const onSubmit = jest.fn();
 
       const wrapper = mount(
         <FormRenderer
-          layoutMapper={ layoutMapper }
-          formFieldsMapper={{
-            [components.TEXT_FIELD]: TextField,
+          FormTemplate={(props) => <FormTemplate {...props} />}
+          componentMapper={{
+            [componentTypes.TEXT_FIELD]: TextField
           }}
-          schema={ schema }
-          onSubmit={ onSubmit }
+          schema={schema}
+          onSubmit={onSubmit}
         />
       );
 
-      wrapper.find('input').first().simulate('change', { target: { value: 'show_true' }});
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'show_true' } });
       wrapper.update();
 
       wrapper.find('form').simulate('submit');
 
       expect(onSubmit).toHaveBeenCalledWith({ input: 'show_true', unmounted: true }, expect.any(Object), expect.any(Function));
       onSubmit.mockClear();
 
-      wrapper.find('input').first().simulate('change', { target: { value: 'show_false' }});
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'show_undef' } });
       wrapper.update();
 
       wrapper.find('form').simulate('submit');
       wrapper.update();
 
-      expect(onSubmit).toHaveBeenCalledWith({ input: 'show_false', unmounted: false }, expect.any(Object), expect.any(Function));
+      expect(onSubmit).toHaveBeenCalledWith({ input: 'show_undef', unmounted: undefined }, expect.any(Object), expect.any(Function));
     });
   });