Live omit fixes

src/components/Form.js

@@ -14,6 +14,7 @@ import {
   deepEquals,
   toPathSchema,
   isObject,
+  getLastPart,
 } from "../utils";
 import validateFormData, { toErrorList } from "../validate";
 
@@ -154,11 +155,7 @@ export default class Form extends Component {
           if (!paths.length) {
             getAllPaths(_obj[key], acc, [key]);
           } else {
-            let newPaths = [];
-            paths.forEach(path => {
-              newPaths.push(path);
-            });
-            newPaths = newPaths.map(path => `${path}.${key}`);
+            let newPaths = paths.map(path => `${path}.${key}`);
             getAllPaths(_obj[key], acc, newPaths);
           }
         } else if (key === "$name") {
@@ -167,6 +164,16 @@ export default class Form extends Component {
             if (typeof formValue !== "object") {
               acc.push(path);
             }
+            if (
+              isObject(formValue) &&
+              Object.keys(formValue).length === 0 &&
+              Array.isArray(getLastPart(formData, path))
+            ) {
+              // If formValue is {} and it is stored above, then user it.
+              // Example: path = "participants.0", formData = {participants: [{}]}, formValue = {}, so it should actually add this path to lodash.
+              // This is because doing _pick(formData, "participants.0.name") gives us {} (i.e. removes the participant) whereas _pick(formData, "participants.0") gives us {}, which is what we want.
+              acc.push(path);
+            }
           });
         }
       });
@@ -194,6 +201,7 @@ export default class Form extends Component {
       );
 
       newFormData = this.getUsedFormData(formData, fieldNames);
+
       state = {
         formData: newFormData,
       };
@@ -237,10 +245,12 @@ export default class Form extends Component {
     event.persist();
     let newFormData = this.state.formData;
 
-    const { pathSchema } = this.state;
-
     if (this.props.omitExtraData === true) {
-      const fieldNames = this.getFieldNames(pathSchema, this.state.formData);
+      const newState = this.getStateFromProps(this.props, this.state.formData);
+      const fieldNames = this.getFieldNames(
+        newState.pathSchema,
+        newState.formData
+      );
       newFormData = this.getUsedFormData(this.state.formData, fieldNames);
     }
 

src/utils.js

@@ -1,5 +1,6 @@
 import React from "react";
 import * as ReactIs from "react-is";
+import _get from "lodash/get";
 import fill from "core-js/library/fn/array/fill";
 import validateFormData, { isValid } from "./validate";
 
@@ -1074,3 +1075,19 @@ export function getMatchingOption(formData, options, definitions) {
   }
   return 0;
 }
+
+function removeLastPart(input) {
+  let parts = input.split(".");
+  if (parts.length < 2) {
+    return input;
+  }
+  parts.pop();
+  return parts.join(".");
+}
+
+export function getLastPart(data, path) {
+  if (path.indexOf(".") === -1) {
+    return data;
+  }
+  return _get(data, removeLastPart(path));
+}