Adding properties should work when additionalProperties is true (#…

…3181) Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>
rjsf-team · Oct 6, 2022 · e5ac1c5 · e5ac1c5
1 parent 4adf86a
commit e5ac1c5
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,7 +21,8 @@ should change the heading of the (upcoming) version to include a major version b
 - Added support for `chakra-react-select` v4, fixing [#3152](https://github.com/rjsf-team/react-jsonschema-form/issues/3152).
 
 ## @rjsf/core
-- Extended `Form.onChange` to optionally return the `id` of the field that caused the change, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2768)
+- Extended `Form.onChange` to optionally return the `id` of the field that caused the change, fixing [#2768](https://github.com/rjsf-team/react-jsonschema-form/issues/2768)
+- Fixed a regression in earlier v5 beta versions where additional properties could not be added when `additionalProperties` was `true` ([#3719](https://github.com/rjsf-team/react-jsonschema-form/pull/3719)).
 
 ## @rjsf/utils
 - Updated the `onChange` prop on `FieldProps` and `FieldTemplateProps` to add an optional `id` parameter to the callback.

diff --git a/packages/core/src/components/fields/ObjectField.tsx b/packages/core/src/components/fields/ObjectField.tsx
@@ -189,21 +189,23 @@ class ObjectField<T = any, F = any> extends Component<
    * @param schema - The schema element to which the new property is being added
    */
   handleAddClick = (schema: RJSFSchema) => () => {
-    if (!isObject(schema.additionalProperties)) {
+    if (!schema.additionalProperties) {
       return;
     }
     const { formData, onChange, registry } = this.props;
-    let type = schema.additionalProperties.type;
     const newFormData = { ...formData };
 
-    if (REF_KEY in schema.additionalProperties) {
-      const { schemaUtils } = registry;
-      const refSchema = schemaUtils.retrieveSchema(
-        { $ref: schema.additionalProperties[REF_KEY] },
-        formData
-      );
-
-      type = refSchema.type;
+    let type: RJSFSchema["type"] = undefined;
+    if (isObject(schema.additionalProperties)) {
+      type = schema.additionalProperties.type;
+      if (REF_KEY in schema.additionalProperties) {
+        const { schemaUtils } = registry;
+        const refSchema = schemaUtils.retrieveSchema(
+          { $ref: schema.additionalProperties[REF_KEY] },
+          formData
+        );
+        type = refSchema.type;
+      }
     }
 
     const newKey = this.getAvailableKey("newKey", newFormData);

diff --git a/packages/core/test/ObjectField_test.js b/packages/core/test/ObjectField_test.js
@@ -875,6 +875,51 @@ describe("ObjectField", () => {
       });
     });
 
+    it("should add a property matching the additionalProperties schema", () => {
+      // Specify that additionalProperties must be an array of strings
+      const additionalPropertiesArraySchema = {
+        ...schema,
+        additionalProperties: {
+          type: "array",
+          items: {
+            type: "string",
+          },
+        },
+      };
+      const { node, onChange } = createFormComponent({
+        schema: additionalPropertiesArraySchema,
+        formData: {},
+      });
+
+      Simulate.click(node.querySelector(".object-property-expand button"));
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: {
+          newKey: [],
+        },
+      });
+    });
+
+    it("should add a string item if additionalProperties is true", () => {
+      // Specify that additionalProperties is true
+      const customSchema = {
+        ...schema,
+        additionalProperties: true,
+      };
+      const { node, onChange } = createFormComponent({
+        schema: customSchema,
+        formData: {},
+      });
+
+      Simulate.click(node.querySelector(".object-property-expand button"));
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: {
+          newKey: "New Value",
+        },
+      });
+    });
+
     it("should not provide an expand button if length equals maxProperties", () => {
       const { node } = createFormComponent({
         schema: { maxProperties: 1, ...schema },