Fix dependency defaults for uncontrolled components (#1371)

* fix: don't return keys with undefined values in computeDefaults

* fix: make sure getDefaultFormState keeps default data equal to 0

* fix: make sure existing formData equal to null is overwritten by defaults

* fix: undo "don't return keys with undefined values"

* fix: fix overwriting of data with defaults for all noneValues

* fix: re-add fix of removing undefined values from computeDefaults

* fix: include form data with undefined values when validateFormData is called

* fix: render dependency defaults for uncontrolled components

src/components/Form.js

@@ -13,6 +13,7 @@ import {
   getDefaultRegistry,
   deepEquals,
   toPathSchema,
+  isObject,
 } from "../utils";
 import validateFormData, { toErrorList } from "../validate";
 
@@ -30,7 +31,7 @@ export default class Form extends Component {
 
   constructor(props) {
     super(props);
-    this.state = this.getStateFromProps(props);
+    this.state = this.getStateFromProps(props, props.formData);
     if (
       this.props.onChange &&
       !deepEquals(this.state.formData, this.props.formData)
@@ -41,7 +42,7 @@ export default class Form extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const nextState = this.getStateFromProps(nextProps);
+    const nextState = this.getStateFromProps(nextProps, nextProps.formData);
     if (
       !deepEquals(nextState.formData, nextProps.formData) &&
       !deepEquals(nextState.formData, this.state.formData) &&
@@ -52,7 +53,7 @@ export default class Form extends Component {
     this.setState(nextState);
   }
 
-  getStateFromProps(props, inputFormData = props.formData) {
+  getStateFromProps(props, inputFormData) {
     const state = this.state || {};
     const schema = "schema" in props ? props.schema : this.props.schema;
     const uiSchema = "uiSchema" in props ? props.uiSchema : this.props.uiSchema;
@@ -171,6 +172,10 @@ export default class Form extends Component {
   };
 
   onChange = (formData, newErrorSchema) => {
+    if (isObject(formData) || Array.isArray(formData)) {
+      const newState = this.getStateFromProps(this.props, formData);
+      formData = newState.formData;
+    }
     const mustValidate = !this.props.noValidate && this.props.liveValidate;
     let state = { formData };
     let newFormData = formData;

src/utils.js

@@ -148,7 +148,8 @@ function computeDefaults(
   schema,
   parentDefaults,
   definitions,
-  rawFormData = {}
+  rawFormData = {},
+  includeUndefinedValues = false
 ) {
   const formData = isObject(rawFormData) ? rawFormData : {};
   // Compute the defaults recursively: give highest priority to deepest nodes.
@@ -163,13 +164,31 @@ function computeDefaults(
   } else if ("$ref" in schema) {
     // Use referenced schema defaults for this node.
     const refSchema = findSchemaDefinition(schema.$ref, definitions);
-    return computeDefaults(refSchema, defaults, definitions, formData);
+    return computeDefaults(
+      refSchema,
+      defaults,
+      definitions,
+      formData,
+      includeUndefinedValues
+    );
   } else if ("dependencies" in schema) {
     const resolvedSchema = resolveDependencies(schema, definitions, formData);
-    return computeDefaults(resolvedSchema, defaults, definitions, formData);
+    return computeDefaults(
+      resolvedSchema,
+      defaults,
+      definitions,
+      formData,
+      includeUndefinedValues
+    );
   } else if (isFixedItems(schema)) {
     defaults = schema.items.map(itemSchema =>
-      computeDefaults(itemSchema, undefined, definitions, formData)
+      computeDefaults(
+        itemSchema,
+        undefined,
+        definitions,
+        formData,
+        includeUndefinedValues
+      )
     );
   } else if ("oneOf" in schema) {
     schema =
@@ -190,12 +209,16 @@ function computeDefaults(
       return Object.keys(schema.properties || {}).reduce((acc, key) => {
         // Compute the defaults for this node, with the parent defaults we might
         // have from a previous run: defaults[key].
-        acc[key] = computeDefaults(
+        let computedDefault = computeDefaults(
           schema.properties[key],
           (defaults || {})[key],
           definitions,
-          (formData || {})[key]
+          (formData || {})[key],
+          includeUndefinedValues
         );
+        if (includeUndefinedValues || computedDefault !== undefined) {
+          acc[key] = computedDefault;
+        }
         return acc;
       }, {});
 
@@ -225,7 +248,12 @@ function computeDefaults(
   return defaults;
 }
 
-export function getDefaultFormState(_schema, formData, definitions = {}) {
+export function getDefaultFormState(
+  _schema,
+  formData,
+  definitions = {},
+  includeUndefinedValues = false
+) {
   if (!isObject(_schema)) {
     throw new Error("Invalid schema: " + _schema);
   }
@@ -234,7 +262,8 @@ export function getDefaultFormState(_schema, formData, definitions = {}) {
     schema,
     _schema.default,
     definitions,
-    formData
+    formData,
+    includeUndefinedValues
   );
   if (typeof formData === "undefined") {
     // No form data? Use schema defaults.
@@ -244,6 +273,9 @@ export function getDefaultFormState(_schema, formData, definitions = {}) {
     // Override schema defaults with form data.
     return mergeObjects(defaults, formData);
   }
+  if (formData === 0) {
+    return formData;
+  }
   return formData || defaults;
 }
 

src/validate.js

@@ -1,7 +1,7 @@
 import toPath from "lodash/toPath";
 import Ajv from "ajv";
 let ajv = createAjvInstance();
-import { deepEquals } from "./utils";
+import { deepEquals, getDefaultFormState } from "./utils";
 
 let formerCustomFormats = null;
 let formerMetaSchema = null;
@@ -172,6 +172,10 @@ export default function validateFormData(
   additionalMetaSchemas = [],
   customFormats = {}
 ) {
+  // Include form data with undefined values, which is required for validation.
+  const { definitions } = schema;
+  formData = getDefaultFormState(schema, formData, definitions, true);
+
   const newMetaSchemas = !deepEquals(formerMetaSchema, additionalMetaSchemas);
   const newFormats = !deepEquals(formerCustomFormats, customFormats);
 

test/Form_test.js

@@ -2469,4 +2469,28 @@ describe("Form", () => {
       sinon.assert.notCalled(outerOnSubmit);
     });
   });
+
+  describe("Dependency defaults", () => {
+    it("should show dependency defaults for uncontrolled components", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          firstName: { type: "string" },
+        },
+        dependencies: {
+          firstName: {
+            properties: {
+              lastName: { type: "string", default: "Norris" },
+            },
+          },
+        },
+      };
+      const { node } = createFormComponent({ schema });
+
+      Simulate.change(node.querySelector("#root_firstName"), {
+        target: { value: "Chuck" },
+      });
+      expect(node.querySelector("#root_lastName").value).eql("Norris");
+    });
+  });
 });

test/utils_test.js

@@ -35,6 +35,33 @@ describe("utils", () => {
           })
         ).to.eql("foo");
       });
+
+      it("should keep existing form data that is equal to 0", () => {
+        expect(
+          getDefaultFormState(
+            {
+              type: "number",
+              default: 1,
+            },
+            0
+          )
+        ).to.eql(0);
+      });
+
+      const noneValues = [null, undefined, NaN];
+      noneValues.forEach(noneValue => {
+        it("should overwrite existing form data that is equal to a none value", () => {
+          expect(
+            getDefaultFormState(
+              {
+                type: "number",
+                default: 1,
+              },
+              noneValue
+            )
+          ).to.eql(1);
+        });
+      });
     });
 
     describe("nested default", () => {
@@ -723,6 +750,27 @@ describe("utils", () => {
         });
       });
     });
+
+    describe("with schema keys not defined in the formData", () => {
+      it("shouldn't add in undefined keys to formData", () => {
+        const schema = {
+          type: "object",
+          properties: {
+            foo: { type: "string" },
+            bar: { type: "string" },
+          },
+        };
+        const formData = {
+          foo: "foo",
+          baz: "baz",
+        };
+        const result = {
+          foo: "foo",
+          baz: "baz",
+        };
+        expect(getDefaultFormState(schema, formData)).to.eql(result);
+      });
+    });
   });
 
   describe("asNumber()", () => {