Merge pull request #1138 from rvsia/fixInitialValuesPriority

Fix priority for initialValues

Author: Hyperkid123

packages/react-form-renderer/package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
   },
   "dependencies": {
-    "final-form": "^4.20.0",
+    "final-form": "^4.20.4",
     "final-form-arrays": "^3.0.2",
     "final-form-focus": "^1.1.2",
     "lodash": "^4.17.15",

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

@@ -101,6 +101,7 @@ const FormRenderer = ({
               ...form,
               ffGetRegisteredFields: form.getRegisteredFields,
               getRegisteredFields: internalGetRegisteredFields,
+              initialValues: props.initialValues,
             },
           }}
         >
@@ -140,6 +141,7 @@ FormRenderer.propTypes = {
       [PropTypes.string]: PropTypes.func,
     }),
   }),
+  initialValues: PropTypes.object,
 };
 
 FormRenderer.defaultProps = {

packages/react-form-renderer/src/renderer-context/renderer-context.d.ts

@@ -18,6 +18,7 @@ export interface FormOptions extends FormApi {
   internalUnregisterField: (name: string) => void;
   getRegisteredFields: () => string[];
   ffGetRegisteredFields: () => string[];
+  initialValues: AnyObject;
 }
 
 export interface RendererContextValue {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import arrayMutators from 'final-form-arrays';
@@ -1752,5 +1753,99 @@ describe('renderForm function', () => {
       wrapper.find('form').simulate('submit');
       expect(onSubmit).toHaveBeenCalledWith({ testField: 'higher-priority' });
     });
+
+    it('empty initialValues ', () => {
+      const onSubmit = jest.fn();
+      const wrapper = mount(
+        <FormRenderer
+          FormTemplate={(props) => <FormTemplate {...props} />}
+          componentMapper={{
+            'custom-component': TextField,
+          }}
+          schema={{
+            fields: [
+              {
+                component: 'custom-component',
+                name: 'testField',
+                initialValue: 'lower-priority',
+              },
+            ],
+          }}
+          onSubmit={(values) => onSubmit(values)}
+          initialValues={{ testField: undefined }}
+        />
+      );
+
+      expect(wrapper.find('input').instance().value).toEqual('lower-priority');
+
+      wrapper.find('form').simulate('submit');
+      expect(onSubmit).toHaveBeenCalledWith({ testField: 'lower-priority' });
+    });
+
+    it('null initialValues ', () => {
+      const onSubmit = jest.fn();
+      const wrapper = mount(
+        <FormRenderer
+          FormTemplate={(props) => <FormTemplate {...props} />}
+          componentMapper={{
+            'custom-component': TextField,
+          }}
+          schema={{
+            fields: [
+              {
+                component: 'custom-component',
+                name: 'testField',
+                initialValue: 'lower-priority',
+              },
+            ],
+          }}
+          onSubmit={(values) => onSubmit(values)}
+          initialValues={{ testField: null }}
+        />
+      );
+
+      expect(wrapper.find('input').instance().value).toEqual('');
+
+      wrapper.find('form').simulate('submit');
+      expect(onSubmit).toHaveBeenCalledWith({ testField: null });
+    });
+
+    it('use initialValue when initialOnMount', async () => {
+      const onSubmit = jest.fn();
+      let wrapper;
+
+      await act(async () => {
+        wrapper = mount(
+          <FormRenderer
+            FormTemplate={(props) => <FormTemplate {...props} />}
+            componentMapper={{
+              'custom-component': TextField,
+            }}
+            schema={{
+              fields: [
+                {
+                  component: 'custom-component',
+                  name: 'testField',
+                  initialValue: 'lower-priority',
+                  initializeOnMount: true,
+                },
+              ],
+            }}
+            onSubmit={(values) => onSubmit(values)}
+            initialValues={{ testField: 'higher-priority' }}
+          />
+        );
+      });
+      wrapper.update();
+
+      expect(wrapper.find('input').instance().value).toEqual('lower-priority');
+
+      await act(async () => {
+        wrapper.find('form').simulate('submit');
+      });
+      wrapper.update();
+
+      expect(onSubmit).toHaveBeenCalledWith({ testField: 'lower-priority' });
+    });
   });
 });

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

@@ -8,6 +8,7 @@ import componentTypes from '../component-types';
 import { prepareArrayValidator, getValidate } from './validator-helpers';
 import composeValidators from './compose-validators';
 import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
 
 const calculateInitialValue = (props) => {
   if (Object.prototype.hasOwnProperty.call(props, 'initialValue') && props.dataType) {
@@ -88,6 +89,10 @@ const useFieldApi = ({ name, resolveProps, skipRegistration = false, ...props })
   const { validatorMapper, formOptions } = useContext(RendererContext);
   const [warning, setWarning] = useState();
 
+  // if there is field initial value, we have to check form initialValues
+  // initialValues should have higher priority
+  const formInitialValue = Object.prototype.hasOwnProperty.call(props, 'initialValue') ? get(formOptions.initialValues, name) : undefined;
+
   const resolvedProps = resolveProps ? resolveProps(props, createFieldProps(name, formOptions), formOptions) || {} : {};
 
   const combinedProps = { ...props, ...resolvedProps };
@@ -112,7 +117,7 @@ const useFieldApi = ({ name, resolveProps, skipRegistration = false, ...props })
     ...(stateValidate ? { validate: stateValidate } : {}),
   };
 
-  const field = useField(name, enhancedProps);
+  const field = useField(name, { ...enhancedProps, ...(typeof formInitialValue !== 'undefined' && { initialValue: formInitialValue }) });
 
   /** Reinitilize type */
   useEffect(() => {