fix(useFieldArray): field array in field array not working

wellyshen · Aug 2, 2021 · 359e4cc · 359e4cc
1 parent e3eb173
commit 359e4cc
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 62 deletions.
diff --git a/.changeset/mighty-wasps-speak.md b/.changeset/mighty-wasps-speak.md
@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+fix(useFieldArray): nested field array not working
diff --git a/app/src/Playground/index.tsx b/app/src/Playground/index.tsx
@@ -1,23 +1,92 @@
 /* eslint-disable no-console */
 
-import { useForm } from "react-cool-form";
+import { useForm, useFieldArray } from "react-cool-form";
 
 export default () => {
-  const { form, runValidation } = useForm({
-    // validate: () => ({ foo: "Required" }),
-    focusOnError: ["foo"],
+  const { form } = useForm({
+    defaultValues: {
+      foo: [
+        {
+          name: "Iron Man",
+          arr: [{ name: "iron arr.0" }, { name: "iron arr.1" }],
+        },
+      ],
+    },
+    onSubmit: (values) => console.log("LOG ===> Form data: ", values),
   });
+  const [fields, { push, insert, remove }] = useFieldArray("foo");
 
   return (
-    <>
-      <form ref={form} noValidate>
-        <input name="foo" required />
-        <input name="bar" required />
-        {/* <input type="submit" /> */}
-      </form>
-      <button type="button" onClick={() => runValidation(["bar"])}>
-        Validate
-      </button>
-    </>
+    <form ref={form}>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Arr</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {fields.map((fieldName, index) => (
+            <tr key={fieldName}>
+              <td>
+                <input name={`${fieldName}.name`} />
+              </td>
+              <td>
+                <Arr field={fieldName} />
+              </td>
+              <td>
+                <button type="button" onClick={() => remove(index)}>
+                  REMOVE
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div>
+        <button
+          type="button"
+          onClick={() => {
+            push({ name: "Loki", arr: [{ name: "Your Savior Is Here" }] });
+          }}
+        >
+          PUSH
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            insert(0, {
+              name: "Spider Man",
+              arr: [{ name: "Your Friendly Neighborhood Spider-Man" }],
+            })
+          }
+        >
+          INSERT
+        </button>
+      </div>
+      <input type="submit" />
+      <input type="reset" />
+    </form>
   );
 };
+
+function Arr({ field }: any) {
+  const [fields, { push }] = useFieldArray(`${field}.arr`);
+
+  return (
+    <div>
+      {fields.map((fieldName) => (
+        <input
+          key={fieldName}
+          style={{ height: "20px", width: "100px" }}
+          type="text"
+          name={`${fieldName}.name`}
+        />
+      ))}
+      <button type="button" onClick={() => push({ name: "xxx" })}>
+        inner push
+      </button>
+    </div>
+  );
+}
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -92,7 +92,7 @@ export type Fields = Map<
 
 export type Parsers = ObjMap<Omit<FieldOptions, "validate">>;
 
-export type FieldArray = ObjMap<{ fields: ObjMap; reset: () => void }>;
+export type FieldArray = Map<string, { fields: ObjMap; reset: () => void }>;
 
 interface EventOptions<V> {
   removeField: RemoveField;

diff --git a/src/useFieldArray.ts b/src/useFieldArray.ts
@@ -66,11 +66,13 @@ export default <T = any, V extends FormValues = FormValues>(
   const [fields, setFields] = useState<string[]>(getFields(true));
 
   const updateFields = useCallback(() => {
-    setFields(getFields());
-    setNodesOrValues(getState("values"), {
-      shouldSetValues: false,
-      fields: Object.keys(fieldArrayRef.current[name].fields),
-    });
+    if (fieldArrayRef.current.has(name)) {
+      setFields(getFields());
+      setNodesOrValues(getState("values"), {
+        shouldSetValues: false,
+        fields: Object.keys(fieldArrayRef.current.get(name)!.fields),
+      });
+    }
   }, [fieldArrayRef, getFields, getState, name, setNodesOrValues]);
 
   useEffect(() => {
@@ -83,16 +85,13 @@ export default <T = any, V extends FormValues = FormValues>(
     }
 
     return () => {
-      if (shouldRemoveField(name)) removeField(name);
+      if (shouldRemoveField(name)) removeField(name, ["defaultValue"]);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (!fieldArrayRef.current[name])
-    fieldArrayRef.current[name] = {
-      reset: updateFields,
-      fields: {},
-    };
+  if (!fieldArrayRef.current.has(name))
+    fieldArrayRef.current.set(name, { reset: updateFields, fields: {} });
   if (validate) fieldValidatorsRef.current[name] = validate;
 
   const setState = useCallback(
@@ -106,8 +105,8 @@ export default <T = any, V extends FormValues = FormValues>(
       let state = getState();
 
       (["values", "touched", "errors", "dirty"] as Keys[]).forEach((key) => {
-        const value = state[key][name];
-        const fieldsLength = state.values[name]?.length;
+        const value = get(state[key], name);
+        const fieldsLength = get(state.values, name)?.length;
 
         if (
           key === "values" ||
@@ -117,15 +116,12 @@ export default <T = any, V extends FormValues = FormValues>(
         )
           state = set(
             state,
-            key,
-            {
-              ...state[key],
-              [name]: handler(
-                Array.isArray(value) ? [...value] : [],
-                key,
-                fieldsLength ? fieldsLength - 1 : 0
-              ),
-            },
+            `${key}.${name}`,
+            handler(
+              Array.isArray(value) ? [...value] : [],
+              key,
+              fieldsLength ? fieldsLength - 1 : 0
+            ),
             true
           );
       });

diff --git a/src/useForm.ts b/src/useForm.ts
@@ -90,7 +90,7 @@ export default <V extends FormValues = FormValues>({
   const formRef = useRef<HTMLElement>();
   const fieldsRef = useRef<Fields>(new Map());
   const fieldParsersRef = useRef<Parsers>({});
-  const fieldArrayRef = useRef<FieldArray>({});
+  const fieldArrayRef = useRef<FieldArray>(new Map());
   const controlsRef = useRef<ObjMap>({});
   const formValidatorRef = useLatest(validate);
   const fieldValidatorsRef = useRef<ObjMap<FieldValidator<V>>>({});
@@ -183,7 +183,7 @@ export default <V extends FormValues = FormValues>({
           const fieldArrayName = isFieldArray(fieldArrayRef.current, name);
 
           if (fieldArrayName)
-            fieldArrayRef.current[fieldArrayName].fields[name] = true;
+            fieldArrayRef.current.get(fieldArrayName)!.fields[name] = true;
 
           acc.set(name, {
             ...acc.get(name),
@@ -292,7 +292,7 @@ export default <V extends FormValues = FormValues>({
       name,
       value,
       shouldUpdateDefaultValue = !isFieldArray(fieldArrayRef.current, name) ||
-        !isUndefined(get(initialStateRef.current.values, name.split(".")[0]))
+        !isUndefined(get(initialStateRef.current.values, name))
     ) => {
       if (shouldUpdateDefaultValue)
         initialStateRef.current.values = set(
@@ -704,7 +704,7 @@ export default <V extends FormValues = FormValues>({
       setNodeValue(name, value);
 
       isFieldArray(fieldArrayRef.current, name, (key) =>
-        fieldArrayRef.current[key].reset()
+        fieldArrayRef.current.get(key)!.reset()
       );
 
       if (shouldTouched) setTouched(name, true, { shouldValidate: false });
@@ -774,7 +774,7 @@ export default <V extends FormValues = FormValues>({
       setStateRef("", state);
       onResetRef.current(state.values, getOptions(), e);
 
-      Object.values(fieldArrayRef.current).forEach((field) => field.reset());
+      fieldArrayRef.current.forEach((field) => field.reset());
     },
     [getOptions, onResetRef, setNodesOrValues, setStateRef, stateRef]
   );
@@ -842,8 +842,8 @@ export default <V extends FormValues = FormValues>({
         ? removeOnUnmounted
         : [
             ...Array.from(fieldsRef.current.keys()),
+            ...Array.from(fieldArrayRef.current.keys()),
             ...Object.keys(controlsRef.current),
-            ...Object.keys(fieldArrayRef.current),
           ];
       names = isFunction(removeOnUnmounted) ? removeOnUnmounted(names) : names;
 
@@ -882,10 +882,9 @@ export default <V extends FormValues = FormValues>({
 
       delete fieldParsersRef.current[name];
       delete fieldValidatorsRef.current[name];
-      delete fieldArrayRef.current[name];
       delete controlsRef.current[name];
-
-      if (fieldsRef.current.has(name)) fieldsRef.current.delete(name);
+      fieldArrayRef.current.delete(name);
+      fieldsRef.current.delete(name);
     },
     [handleUnset, stateRef]
   );

diff --git a/src/utils/isFieldArray.test.ts b/src/utils/isFieldArray.test.ts
@@ -2,20 +2,26 @@ import isFieldArray from "./isFieldArray";
 
 describe("isFieldArray", () => {
   it("should work correctly", () => {
-    // @ts-expect-error
-    expect(isFieldArray({ foo: true }, "foo[0].a")).toBe("foo");
+    const value = { fields: {}, reset: () => null };
+    const foo = new Map([
+      ["foo", value],
+      ["foo[0].a[0]", value],
+    ]);
 
-    // @ts-expect-error
-    expect(isFieldArray({ foo: true }, "bar[0].a")).toBeUndefined();
+    expect(isFieldArray(foo, "foo[0].a")).toBe("foo");
+
+    expect(isFieldArray(foo, "foo[0].a[0].b")).toBe("foo[0].a[0]");
+
+    expect(isFieldArray(foo, "bar[0].a")).toBeUndefined();
 
     let callback = jest.fn();
-    // @ts-expect-error
-    isFieldArray({ foo: true }, "foo[0].a", callback);
+
+    isFieldArray(foo, "foo[0].a", callback);
     expect(callback).toHaveBeenCalledWith("foo");
 
     callback = jest.fn();
-    // @ts-expect-error
-    isFieldArray({ foo: true }, "bar[0].a", callback);
+
+    isFieldArray(foo, "bar[0].a", callback);
     expect(callback).not.toHaveBeenCalled();
   });
 });
diff --git a/src/utils/isFieldArray.ts b/src/utils/isFieldArray.ts
@@ -7,14 +7,16 @@ export default (
 ): string | void => {
   let fieldName;
 
-  Object.keys(fields).some((key) => {
-    if (name.startsWith(key)) {
-      fieldName = key;
-      if (callback) callback(key);
-      return true;
-    }
-    return false;
-  });
+  Array.from(fields)
+    .reverse()
+    .some(([key]) => {
+      if (name.startsWith(key)) {
+        fieldName = key;
+        if (callback) callback(key);
+        return true;
+      }
+      return false;
+    });
 
   return fieldName;
 };