Revert removing value from field state. Fixes #573

Author: davidkpiano

src/reducers/form-reducer.js

@@ -31,13 +31,15 @@ export function createInitialState(model, state, customInitialFieldState = {}, o
   } else {
     return i.merge(initialFieldState, {
       initialValue: state,
+      value: state,
       model,
       ...customInitialFieldState,
     });
   }
 
   const initialForm = i.merge(initialFieldState, {
     initialValue: state,
+    value: state,
     model,
     ...customInitialFieldState,
   });

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

@@ -1,6 +1,7 @@
 import actionTypes from '../../action-types';
 import i from 'icepick';
 import get from '../../utils/get';
+import shallowEqual from '../../utils/shallow-equal';
 import isPlainObject from '../../utils/is-plain-object';
 import mapValues from '../../utils/map-values';
 import { createInitialState } from '../form-reducer';
@@ -15,23 +16,34 @@ function updateFieldValue(field, action, parentModel = undefined) {
     ? field.$form
     : field;
 
-  const valueIsArray = Array.isArray(value);
-
   const changedFieldProps = {
     validated: false,
-    retouched: fieldState.submitted || fieldState.retouched,
+    retouched: fieldState.submitted
+      ? true
+      : fieldState.retouched,
     intents: [{ type: 'validate' }],
-    pristine: silent && fieldState.pristine,
-    loadedValue: (load && value) || fieldState.loadedValue,
+    pristine: silent
+      ? fieldState.pristine
+      : false,
+    loadedValue: load
+      ? value
+      : fieldState.loadedValue,
   };
 
+  if (shallowEqual(field.value, value)) {
+    return i.merge(field, changedFieldProps);
+  }
+
   if (removeKeys) {
     invariant(field && field.$form,
       'Unable to remove keys. ' +
       'Field for "%s" in store is not an array/object.',
       model);
 
-    const removeKeysArray = [].concat(removeKeys);
+    const valueIsArray = Array.isArray(field.$form.value);
+    const removeKeysArray = Array.isArray(removeKeys)
+      ? removeKeys
+      : [removeKeys];
 
     let result;
 
@@ -58,8 +70,8 @@ function updateFieldValue(field, action, parentModel = undefined) {
     return result;
   }
 
-  if (!valueIsArray && !isPlainObject(value)) {
-    return i.merge(field, changedFieldProps);
+  if (!Array.isArray(value) && !isPlainObject(value)) {
+    return i.merge(field, i.set(changedFieldProps, 'value', value));
   }
 
   const updatedField = mapValues(value, (subValue, index) => {
@@ -77,7 +89,12 @@ function updateFieldValue(field, action, parentModel = undefined) {
       }, parentModel ? `${parentModel}.${model}` : model);
     }
 
+    if (shallowEqual(subValue, subField.value)) {
+      return subField;
+    }
+
     return i.merge(subField, i.assign(changedFieldProps, {
+      value: subValue,
       loadedValue: load
         ? subValue
         : subField.loadedValue,

test/field-actions-spec.js

@@ -1101,7 +1101,11 @@ Object.keys(testContexts).forEach((testKey) => {
 
         assert.containSubset(
           reducer(changedState, actions.setInitial('test.foo'))
-            .foo, initialFieldState);
+            .foo,
+          {
+            ...initialFieldState,
+            value: 'changed',
+          });
       });
     });
 

test/form-reducer-actions-spec.js

@@ -23,6 +23,7 @@ describe('formReducer() (V1)', () => {
         expectedField: {
           pristine: false,
           validated: false,
+          value: 'foo',
         },
         expectedForm: {
           pristine: false,
@@ -35,6 +36,7 @@ describe('formReducer() (V1)', () => {
           $form: {
             pristine: false,
             validated: false,
+            value: { foo: 'bar' },
           },
         },
         expectedForm: {
@@ -48,6 +50,7 @@ describe('formReducer() (V1)', () => {
           $form: {
             pristine: false,
             validated: false,
+            value: [1, 2, 3],
           },
         },
         expectedForm: {
@@ -59,6 +62,7 @@ describe('formReducer() (V1)', () => {
         args: ['string'],
         expectedField: {
           pristine: true,
+          value: 'string',
           loadedValue: 'string',
         },
         expectedForm: {
@@ -70,6 +74,7 @@ describe('formReducer() (V1)', () => {
         args: [42],
         expectedField: {
           pristine: true,
+          value: 42,
           loadedValue: 42,
         },
         expectedForm: {
@@ -82,10 +87,12 @@ describe('formReducer() (V1)', () => {
         expectedField: {
           $form: {
             pristine: true,
+            value: { foo: 'bar' },
             loadedValue: { foo: 'bar' },
           },
           foo: {
             pristine: true,
+            value: 'bar',
             initialValue: 'bar',
           },
         },
@@ -700,6 +707,7 @@ describe('formReducer() (V1)', () => {
 
     it('should change the loaded value for the field', () => {
       assert.equal(loadedState.foo.loadedValue, 'new loaded');
+      assert.equal(loadedState.foo.value, 'new loaded');
     });
 
     it('should change the loaded value for the form', () => {

test/local-forms-spec.js

@@ -11,13 +11,9 @@ describe('local forms', () => {
 
   describe('standard usage with onUpdate', () => {
     let innerFormState;
-    let innerModelState;
 
     const form = TestUtils.renderIntoDocument(
-      <LocalForm
-        onUpdate={(formValue) => innerFormState = formValue}
-        onChange={(modelState) => innerModelState = modelState}
-      >
+      <LocalForm onUpdate={(formValue) => innerFormState = formValue}>
         <Control.text model=".foo" />
       </LocalForm>
     );
@@ -42,12 +38,9 @@ describe('local forms', () => {
         },
         foo: {
           pristine: false,
+          value: 'changed',
         },
       });
-
-      assert.deepEqual(innerModelState, {
-        foo: 'changed',
-      });
     });
   });