Merge pull request rjsf-team#2 from damacisaac/webapp/clear-null-fiel…

…ds-on-change Clear dependent null fields on change
saadtazi · Apr 2, 2019 · f1ff37a · f1ff37a
2 parents 7c82f45 + ee4ee86
commit f1ff37a
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 18 deletions.
diff --git a/playground/samples/null.js b/playground/samples/null.js
@@ -3,26 +3,45 @@ module.exports = {
     title: "Null field example",
     description: "A short form with a null field",
     type: "object",
-    required: ["firstName"],
     properties: {
-      helpText: {
-        title: "A null field",
-        description:
-          "Null fields like this are great for adding extra information",
-        type: "null",
+      Nullable: {
+        type: "object",
+        properties: {
+          CarpoolInd: {
+            type: "boolean",
+            default: false,
+          },
+        },
+        dependencies: {
+          CarpoolInd: {
+            oneOf: [
+              {
+                properties: {
+                  CarpoolInd: {
+                    const: true,
+                  },
+                  NumPassengers: {
+                    type: "integer",
+                  },
+                },
+                required: ["NumPassengers"],
+              },
+              {
+                properties: {
+                  CarpoolInd: {
+                    const: false,
+                  },
+                  NumPassengers: {
+                    type: "null",
+                  },
+                },
+              },
+            ],
+          },
+        },
       },
-      firstName: {
-        type: "string",
-        title: "A regular string field",
-        default: "Chuck",
-      },
-    },
-  },
-  uiSchema: {
-    firstName: {
-      "ui:autofocus": true,
-      "ui:emptyValue": "",
     },
   },
+  uiSchema: {},
   formData: {},
 };
diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
@@ -9,6 +9,7 @@ import {
   getUiOptions,
   ADDITIONAL_PROPERTY_FLAG,
 } from "../../utils";
+import { isObject } from "../../utils";
 
 function DefaultObjectFieldTemplate(props) {
   const canExpand = function canExpand() {
@@ -92,7 +93,26 @@ class ObjectField extends Component {
         // set empty values to the empty string.
         value = "";
       }
-      const newFormData = { ...this.props.formData, [name]: value };
+      let newFormData = { ...this.props.formData, [name]: value };
+
+      // Retrieve what the schema will be after updating formData
+      const newSchema = retrieveSchema(
+        this.props.schema.properties[name],
+        this.props.registry.definitions,
+        newFormData[name]
+      );
+
+      // Set any null type fields back to null. Necessary for fields
+      // with dependencies that can alternate between null and another
+      // field type.
+      if (isObject(newSchema.properties)) {
+        Object.keys(newSchema.properties).forEach(property => {
+          if (newSchema.properties[property].type === "null") {
+            newFormData[name][property] = null;
+          }
+        });
+      }
+
       this.props.onChange(
         newFormData,
         errorSchema &&