Properly updating field state when loading complex models. Fixes #516

Author: davidkpiano

src/actions/model-actions.js

@@ -142,6 +142,7 @@ export function createModelActions(s = defaultStrategies) {
 
   const load = (model, values) => change(model, values, {
     silent: true,
+    load: true,
   });
 
   return mapValues({

src/reducers/form/change-action-reducer.js

@@ -10,28 +10,30 @@ import initialFieldState from '../../constants/initial-field-state';
 import updateParentForms from '../../utils/update-parent-forms';
 
 function updateFieldValue(field, action) {
-  const { value, removeKeys, silent, model } = action;
+  const { value, removeKeys, silent, load, model } = action;
+
+  const fieldState = (field && field.$form)
+    ? field.$form
+    : field;
 
   const changedFieldProps = {
     validated: false,
-    retouched: field.submitted
+    retouched: fieldState.submitted
       ? true
-      : field.retouched,
+      : fieldState.retouched,
     intents: [{ type: 'validate' }],
-    pristine: false,
+    pristine: silent
+      ? fieldState.pristine
+      : false,
+    initialValue: load
+      ? value
+      : fieldState.initialValue,
   };
 
   if (shallowEqual(field.value, value)) {
     return i.merge(field, changedFieldProps);
   }
 
-  if (silent) {
-    return i.merge(field, {
-      value,
-      initialValue: value,
-    });
-  }
-
   if (removeKeys) {
     const valueIsArray = Array.isArray(field.$form.value);
     const removeKeysArray = Array.isArray(removeKeys)
@@ -81,7 +83,12 @@ function updateFieldValue(field, action) {
       return subField;
     }
 
-    return i.merge(subField, i.set(changedFieldProps, 'value', subValue));
+    return i.merge(subField, i.assign(changedFieldProps, {
+      value: subValue,
+      initialValue: load
+        ? subValue
+        : subField.initialValue,
+    }));
   });
 
   const dirtyFormState = i.merge(field.$form || initialFieldState,

test/form-reducer-actions-spec.js

@@ -58,8 +58,8 @@ describe('formReducer() (V1)', () => {
         },
       },
       {
-        action: actions.change,
-        args: ['string', { silent: true }],
+        action: actions.load,
+        args: ['string'],
         expectedField: {
           pristine: true,
           value: 'string',
@@ -70,8 +70,8 @@ describe('formReducer() (V1)', () => {
         },
       },
       {
-        action: actions.change,
-        args: [42, { silent: true }],
+        action: actions.load,
+        args: [42],
         expectedField: {
           pristine: true,
           value: 42,
@@ -82,12 +82,19 @@ describe('formReducer() (V1)', () => {
         },
       },
       {
-        action: actions.change,
-        args: [{ foo: 'bar' }, { silent: true }],
+        action: actions.load,
+        args: [{ foo: 'bar' }],
         expectedField: {
-          pristine: true,
-          value: { foo: 'bar' },
-          initialValue: { foo: 'bar' },
+          $form: {
+            pristine: true,
+            value: { foo: 'bar' },
+            initialValue: { foo: 'bar' },
+          },
+          foo: {
+            pristine: true,
+            value: 'bar',
+            initialValue: 'bar',
+          },
         },
         expectedForm: {
           pristine: true,