Fix uiSchema for additionalProperties (#1144)

* fix: uiSchema for additionalProperties #1132

* doc: update readme

* doc: fix toc

* doc: update docs

Author: epicfaace

docs/form-customization.md

@@ -248,11 +248,23 @@ const uiSchema = {
 };
 ```
 
-### Object item options
+### Object additional properties
 
-#### `expandable` option
+You can define `additionalProperties` by setting its value to a schema object, such as the following:
 
-If `additionalProperties` contains a schema object, an add button for new properties is shown by default. The UX for editing properties whose names are user-defined is still experimental.
+```js
+const schema = {
+  "type": "object",
+  "properties": {"type": "string"},
+  "additionalProperties": {"type": "number"}
+}
+```
+
+In this way, an add button for new properties is shown by default. The UX for editing properties whose names are user-defined is still experimental.
+
+You can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`.
+
+#### `expandable` option
 
 You can turn support for `additionalProperties` off with the `expandable` option in `uiSchema`:
 

src/components/fields/ObjectField.js

@@ -213,7 +213,6 @@ class ObjectField extends Component {
     }
 
     const Template = registry.ObjectFieldTemplate || DefaultObjectFieldTemplate;
-
     const templateProps = {
       title: uiSchema["ui:title"] || title,
       description,
@@ -230,7 +229,11 @@ class ObjectField extends Component {
               name={name}
               required={this.isRequired(name)}
               schema={schema.properties[name]}
-              uiSchema={uiSchema[name]}
+              uiSchema={
+                addedByAdditionalProperties
+                  ? uiSchema.additionalProperties
+                  : uiSchema[name]
+              }
               errorSchema={errorSchema[name]}
               idSchema={idSchema[name]}
               idPrefix={idPrefix}

test/ArrayField_test.js

@@ -1162,6 +1162,22 @@ describe("ArrayField", () => {
       expect(addInput.value).eql("bar");
     });
 
+    it("should apply uiSchema to additionalItems", () => {
+      const { node } = createFormComponent({
+        schema: schemaAdditional,
+        uiSchema: {
+          additionalItems: {
+            "ui:title": "Custom title",
+          },
+        },
+        formData: [1, 2, "bar"],
+      });
+      const label = node.querySelector(
+        "fieldset .field-string label.control-label"
+      );
+      expect(label.textContent).eql("Custom title*");
+    });
+
     it("should have an add button if additionalItems is an object", () => {
       const { node } = createFormComponent({ schema: schemaAdditional });
       expect(node.querySelector(".array-item-add button")).not.to.be.null;

test/ObjectField_test.js

@@ -412,6 +412,23 @@ describe("ObjectField", () => {
       expect(node.querySelectorAll(".field-string")).to.have.length.of(1);
     });
 
+    it("should apply uiSchema to additionalProperties", () => {
+      const { node } = createFormComponent({
+        schema,
+        uiSchema: {
+          additionalProperties: {
+            "ui:title": "CustomName",
+          },
+        },
+        formData: {
+          property1: "test",
+        },
+      });
+      const labels = node.querySelectorAll("label.control-label");
+      expect(labels[0].textContent).eql("CustomName Key");
+      expect(labels[1].textContent).eql("CustomName");
+    });
+
     it("should pass through non-schema properties and not throw validation errors if additionalProperties is undefined", () => {
       const undefinedAPSchema = {
         ...schema,