Merge pull request #698 from Shopify/formstate-list-nested-fix

Fix Formstate.Nested in Formstate.List
Shopify · May 15, 2019 · 6abd166 · 6abd166
2 parents 0056234 + 9e53b5c
commit 6abd166
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
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 -->
 
+### Fixed
+
+- `FormState.Nested` no longer breaks when used in a `FormState.List` and an item is added [#698](https://github.com/Shopify/quilt/pull/698)
+
 ## [0.10.0]
 
 ### Changed

diff --git a/packages/react-form-state/src/components/Nested.tsx b/packages/react-form-state/src/components/Nested.tsx
@@ -23,7 +23,8 @@ export default class Nested<Fields> extends React.PureComponent<
     const innerFields: FieldDescriptors<Fields> = mapObject(
       value,
       (value, fieldPath) => {
-        const initialFieldValue = initialValue[fieldPath];
+        const initialFieldValue = initialValue && initialValue[fieldPath];
+
         return {
           value,
           onBlur,

diff --git a/packages/react-form-state/src/components/tests/List.test.tsx b/packages/react-form-state/src/components/tests/List.test.tsx
@@ -6,7 +6,8 @@ import {trigger} from '@shopify/enzyme-utilities';
 // eslint-disable-next-line shopify/strict-component-boundaries
 import {Input} from '../../tests/components';
 import {lastCallArgs} from '../../tests/utilities';
-import FormState from '../..';
+import FormState, {arrayUtils} from '../..';
+import {FieldDescriptor} from '../../types';
 
 describe('<FormState.List />', () => {
   it('passes form state into child function for each index of the given array', () => {
@@ -339,4 +340,49 @@ describe('<FormState.List />', () => {
     expect(updatedFields.title.value).toBe(newTitle);
     expect(updatedFields.department.value).toBe(newDepartment);
   });
+
+  it('does not raise an exceptions when list items are nested', () => {
+    const variants = [
+      {
+        product: {
+          title: faker.commerce.department(),
+        },
+      },
+    ];
+
+    const renderSpy = jest.fn(({title}) => {
+      return <Input label="title" {...title} />;
+    });
+
+    let variantsRef: FieldDescriptor<any>;
+    mount(
+      <FormState initialValues={{variants}}>
+        {({fields}) => {
+          variantsRef = fields.variants;
+          return (
+            <>
+              <FormState.List field={fields.variants}>
+                {nestedFields => (
+                  <FormState.Nested field={nestedFields.product}>
+                    {renderSpy}
+                  </FormState.Nested>
+                )}
+              </FormState.List>
+            </>
+          );
+        }}
+      </FormState>,
+    );
+
+    const newVariants = arrayUtils.push(variantsRef.value, {
+      product: {
+        title: 'newProduct',
+      },
+    });
+    variantsRef.onChange(newVariants);
+    const calls = renderSpy.mock.calls;
+    const originalRenderCount = variants.length;
+    const rerenderedCount = originalRenderCount + 1;
+    expect(calls).toHaveLength(originalRenderCount + rerenderedCount);
+  });
 });