Fixes #231: Reset ObjectField state on diffing formData keys. (#234)

Author: n1k0

devServer.js

@@ -19,6 +19,10 @@ app.use(require("webpack-dev-middleware")(compiler, {
 
 app.use(require("webpack-hot-middleware")(compiler));
 
+app.get("/favicon.ico", function(req, res) {
+  res.status(204).end();
+});
+
 app.get("/", function(req, res) {
   res.sendFile(path.join(__dirname, "playground", "index.html"));
 });

src/components/Form.js

@@ -45,7 +45,16 @@ export default class Form extends Component {
         errorSchema: state.errorSchema || {}
       };
     const idSchema = toIdSchema(schema, uiSchema["ui:rootFieldId"], definitions);
-    return {status: "initial", formData, edit, errors, errorSchema, idSchema};
+    return {
+      status: "initial",
+      schema,
+      uiSchema,
+      idSchema,
+      formData,
+      edit,
+      errors,
+      errorSchema
+    };
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -120,8 +129,6 @@ export default class Form extends Component {
   render() {
     const {
       children,
-      schema,
-      uiSchema,
       safeRenderCompletion,
       id,
       className,
@@ -134,7 +141,7 @@ export default class Form extends Component {
       acceptcharset
     } = this.props;
 
-    const {formData, errorSchema, idSchema} = this.state;
+    const {schema, uiSchema, formData, errorSchema, idSchema} = this.state;
     const registry = this.getRegistry();
     const _SchemaField = registry.fields.SchemaField;
 

src/components/fields/ObjectField.js

@@ -1,4 +1,6 @@
 import React, { Component, PropTypes } from "react";
+import deeper from "deeper";
+
 
 import {
   getDefaultFormState,
@@ -10,6 +12,20 @@ import {
 } from "../../utils";
 
 
+function objectKeysHaveChanged(formData, state) {
+  // for performance, first check for lengths
+  const newKeys = Object.keys(formData);
+  const oldKeys = Object.keys(state);
+  if (newKeys.length < oldKeys.length) {
+    return true;
+  }
+  // deep check on sorted keys
+  if (!deeper(newKeys.sort(), oldKeys.sort())) {
+    return true;
+  }
+  return false;
+}
+
 class ObjectField extends Component {
   static defaultProps = {
     uiSchema: {},
@@ -27,7 +43,16 @@ class ObjectField extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState(this.getStateFromProps(nextProps));
+    const state = this.getStateFromProps(nextProps);
+    const {formData} = nextProps;
+    if (formData && objectKeysHaveChanged(formData, this.state)) {
+      // We *need* to replace state entirely here has we have received formData
+      // holding different keys (so with some removed).
+      this.state = state;
+      this.forceUpdate();
+    } else {
+      this.setState(state);
+    }
   }
 
   getStateFromProps(props) {

test/Form_test.js

@@ -662,7 +662,7 @@ describe("Form", () => {
         expect(comp.state.errorSchema).eql({
           __errors: [
             "does not meet minimum length of 8",
-            `does not match pattern "\d+"`
+            "does not match pattern \"\d+\""
           ]
         });
       });
@@ -675,7 +675,7 @@ describe("Form", () => {
 
         expect(errors).eql([
           "does not meet minimum length of 8",
-          `does not match pattern "\d+"`
+          "does not match pattern \"\d+\""
         ]);
       });
     });
@@ -926,6 +926,58 @@ describe("Form", () => {
     });
   });
 
+  describe("Schema and formData updates", () => {
+    // https://github.com/mozilla-services/react-jsonschema-form/issues/231
+    const schema = {
+      type: "object",
+      properties: {
+        foo: {type: "string"},
+        bar: {type: "string"},
+      }
+    };
+
+    it("should replace state when formData have keys removed", () => {
+      const formData = {foo: "foo", bar: "bar"};
+      const {comp, node} = createFormComponent({schema, formData});
+      comp.componentWillReceiveProps({
+        schema: {
+          type: "object",
+          properties: {
+            bar: {type: "string"},
+          }
+        },
+        formData: {bar: "bar"},
+      });
+
+      Simulate.change(node.querySelector("#root_bar"), {
+        target: {value: "baz"}
+      });
+
+      expect(comp.state.formData).eql({bar: "baz"});
+    });
+
+    it("should replace state when formData keys have changed", () => {
+      const formData = {foo: "foo", bar: "bar"};
+      const {comp, node} = createFormComponent({schema, formData});
+      comp.componentWillReceiveProps({
+        schema: {
+          type: "object",
+          properties: {
+            foo: {type: "string"},
+            baz: {type: "string"},
+          }
+        },
+        formData: {foo: "foo", baz: "bar"},
+      });
+
+      Simulate.change(node.querySelector("#root_baz"), {
+        target: {value: "baz"}
+      });
+
+      expect(comp.state.formData).eql({foo: "foo", baz: "baz"});
+    });
+  });
+
   describe("Attributes", () => {
     const formProps = {
       schema: {},