Merge pull request #72 from 92green/feature/branch-react-keying

fix: remount Branch component if base form changes

Author: dxinteractive

packages/dendriform/src/Dendriform.tsx

@@ -962,7 +962,7 @@ export class Dendriform<V,P extends Plugins = undefined> {
         const renderer = aIsRenderer ? a : b;
         const deps = aIsRenderer ? b : c;
         const form = aIsRenderer ? this : this.branch(a);
-        return <Branch renderer={() => renderer(form)} deps={deps} />;
+        return <Branch key={form.id} renderer={() => renderer(form)} deps={deps} />;
     }
 
     renderAll<K1 extends Key<V>, K2 extends keyof Val<V,K1>, K3 extends keyof Val<Val<V,K1>,K2>, K4 extends keyof Val<Val<Val<V,K1>,K2>,K3>, W extends Val<Val<Val<V,K1>,K2>,K3>[K4]>(path: [K1, K2, K3, K4], renderer: Renderer<Dendriform<BranchableChild<W>,P>>, deps?: unknown[]): React.ReactElement;
@@ -988,7 +988,7 @@ export class Dendriform<V,P extends Plugins = undefined> {
             });
         };
 
-        return <Branch renderer={containerRenderer} deps={deps} />;
+        return <Branch key={form.id} renderer={containerRenderer} deps={deps} />;
     }
 }
 

packages/dendriform/test/Dendriform.test.tsx

@@ -21,6 +21,13 @@ type MyComponentProps<V> = {
     form: Dendriform<V>;
 };
 
+type MyComponentIndexProps<V> = {
+    foo: number;
+    bar?: number;
+    form: Dendriform<V>;
+    index: number;
+};
+
 type NotSetTestValue = {
     foo?: string;
     bar?: string;
@@ -1121,6 +1128,24 @@ describe(`Dendriform`, () => {
                 expect(renderer).toHaveBeenCalledTimes(2);
             });
 
+            test(`should render one level with changing form`, () => {
+                const form = new Dendriform(['A','B','C']);
+
+                const renderer = jest.fn(form => <div className="branch">{form.value}</div>);
+
+                const MyComponent = (props: MyComponentIndexProps<string[]>) => {
+                    return props.form.render(props.index, renderer, [props.foo]);
+                };
+
+                const wrapper = mount(<MyComponent form={form} foo={1} bar={1} index={0} />);
+
+                expect(renderer).toHaveBeenCalledTimes(1);
+
+                // should update if base form change
+                wrapper.setProps({foo: 1, bar: 1, form, index: 1});
+                expect(renderer).toHaveBeenCalledTimes(2);
+            });
+
             test(`should render multiple levels with deps`, () => {
                 const form = new Dendriform([[['A','B']]]);