Merge pull request #464 from Shopify/formstate-deep-equals-reconcilia…

…tion ✨ Support use of onInitialValueChanged prop with fields having nested properties
Shopify · Jan 11, 2019 · 17362ff · 17362ff
2 parents 4fa1ceb + 998265e
commit 17362ff
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/packages/react-form-state/CHANGELOG.md b/packages/react-form-state/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+### Added
+
+- You can now use the onInitialValueChanged prop with fields having nested properties.
+
 ### Fixed
 
 - `submit` now checks for the existence of `preventDefault` on the event passed in before calling it.

diff --git a/packages/react-form-state/src/FormState.ts b/packages/react-form-state/src/FormState.ts
@@ -395,7 +395,7 @@ function reconcileFormState<Fields>(
   const fields: FieldStates<Fields> = mapObject(values, (value, key) => {
     const oldField = oldFields[key];
 
-    if (value === oldField.initialValue) {
+    if (isEqual(value, oldField.initialValue)) {
       return oldField;
     }
 

diff --git a/packages/react-form-state/src/tests/FormState.test.tsx b/packages/react-form-state/src/tests/FormState.test.tsx
@@ -182,6 +182,64 @@ describe('<FormState />', () => {
         });
       });
 
+      it('does not reset a field when initial value has not changed and deep comparison is required', () => {
+        const renderPropSpy = jest.fn(() => null);
+        const originalOption = 'color';
+        const originalVariant1 = faker.commerce.color();
+        const originalVariant2 = faker.commerce.color();
+        const originalValues = {
+          variants: [
+            {
+              option: originalOption,
+              values: [originalVariant1, originalVariant2],
+            },
+          ],
+        };
+
+        const form = mount(
+          <FormState
+            initialValues={originalValues}
+            onInitialValuesChange="reset-where-changed"
+          >
+            {renderPropSpy}
+          </FormState>,
+        );
+
+        const formDetails = lastCallArgs(renderPropSpy);
+        const changedVariants = [
+          {
+            option: 'material',
+            values: [
+              faker.commerce.productMaterial(),
+              faker.commerce.productMaterial(),
+            ],
+          },
+        ];
+        formDetails.fields.variants.onChange(changedVariants);
+
+        const unchangedInitialVariants = [
+          {
+            option: originalOption,
+            values: [originalVariant1, originalVariant2],
+          },
+        ];
+
+        form.setProps({
+          initialValues: {
+            variants: unchangedInitialVariants,
+          },
+        });
+
+        const {fields} = lastCallArgs(renderPropSpy);
+        expect(fields).toMatchObject({
+          variants: {
+            value: changedVariants,
+            initialValue: originalValues.variants,
+            dirty: true,
+          },
+        });
+      });
+
       it('does not reset errors when the initialValues prop is updated', async () => {
         const renderPropSpy = jest.fn(() => null);
         const originalValues = {