should add repeated element in a form state

LunaTK · Nov 8, 2023 · 021c552 · 021c552
1 parent e13bfce
commit 021c552
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/packages/core/src/AutoForm.test.tsx b/packages/core/src/AutoForm.test.tsx
@@ -35,7 +35,7 @@ const MockApp: React.FC<MockAppProps> = (props) => {
 afterEach(cleanup);
 
 describe("AutoForm", () => {
-  it("Add map item", async () => {
+  it("Add repeated item", async () => {
     const namespace = protobuf.parse(`
       syntax = "proto3";
 
@@ -69,4 +69,39 @@ describe("AutoForm", () => {
       "repeated element should be added"
     ).toEqual([{ children: [""] }]);
   });
+
+  it('Add map item', async () => {
+    const namespace = protobuf.parse(`
+      syntax = "proto3";
+
+      message Child {
+        map<string, string> val = 1;
+      }
+
+      message Parent {
+        repeated Child children = 1;
+      }
+    `).root;
+
+    const handleSubmit = vi.fn();
+    const dom = render(
+      <MockApp
+        onSubmit={handleSubmit}
+        namespace={namespace}
+        messageType="Parent"
+      >
+        <button id="submit" />
+      </MockApp>
+    );
+
+    fireEvent.click(dom.queryByTestId("add-btn")!);
+    await vi.waitUntil(() => dom.queryByTestId("delete-btn") !== null);
+    fireEvent.click(dom.container.querySelector("#submit")!);
+    await waitFor(() => handleSubmit.mock.calls.length === 1);
+
+    expect(
+      handleSubmit.mock.calls[0],
+      "repeated element with map should work"
+    ).toEqual([{ children: [{ val: {} }] }]);
+  })
 });
diff --git a/packages/core/src/protobuf/input/arrayLike/Repeated.tsx b/packages/core/src/protobuf/input/arrayLike/Repeated.tsx
@@ -6,6 +6,8 @@ import { FieldOptions } from '../../../models';
 import { useChildFields } from '../../../hooks';
 import { getInitialValue } from '../../conversion/initial';
 import ArrayLike from './ArrayLike';
+import { useAutoFormCtx } from '../../../context';
+import { proto2Form } from '../../conversion';
 
 interface Props {
   name: string;
@@ -21,12 +23,15 @@ const RepeatedInput: React.FC<Props> = ({ field, name, options }) => {
     name,
     rules: options?.rules,
   });
+  const ctx = useAutoFormCtx();
 
   return (
     <ArrayLike
-      onAdd={() =>
-        append({ $value: getInitialValue(field, { ignoreArrayLike: true }) })
-      }
+      onAdd={() => {
+        const value = getInitialValue(field, { ignoreArrayLike: true });
+        const $value = proto2Form(ctx)(value, field.resolvedType, options);
+        append({ $value });
+      }}
       onRemove={remove}
       fields={fields}
       render={({ idx }) => (