fix(@rjsf/core): use name for additional properties (#2878)

* fix(@rjsf/core): use name for additional properties

* don't use hasOwnProperty

* added changelog

Co-authored-by: Heath C <[email protected]>

Author: Rani

CHANGELOG.md

@@ -15,6 +15,12 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+
+# 5.0.0-beta.8
+
+## @rjsf/core
+- When rendering additional properties with title, use the key of the property instead of the title.
+
 # v5.0.0-beta.7
 
 ## @rjsf/antd

packages/core/src/components/fields/SchemaField.tsx

@@ -13,6 +13,7 @@ import {
   RJSFSchemaDefinition,
   UIOptionsType,
   ID_KEY,
+  ADDITIONAL_PROPERTY_FLAG,
 } from "@rjsf/utils";
 import isObject from "lodash/isObject";
 import omit from "lodash/omit";
@@ -199,7 +200,10 @@ function SchemaFieldRender<T, F>(props: FieldProps<T, F>) {
   if (wasPropertyKeyModified) {
     label = name;
   } else {
-    label = uiOptions.title || props.schema.title || schema.title || name;
+    label =
+      ADDITIONAL_PROPERTY_FLAG in schema
+        ? name
+        : uiOptions.title || props.schema.title || schema.title || name;
   }
 
   const description =

packages/core/test/ObjectField_test.js

@@ -446,7 +446,7 @@ describe("ObjectField", () => {
       expect(node.querySelectorAll(".field-string")).to.have.length.of(1);
     });
 
-    it("should apply uiSchema to additionalProperties", () => {
+    it("uiSchema title should not affect additionalProperties", () => {
       const { node } = createFormComponent({
         schema,
         uiSchema: {
@@ -459,8 +459,56 @@ describe("ObjectField", () => {
         },
       });
       const labels = node.querySelectorAll("label.control-label");
-      expect(labels[0].textContent).eql("CustomName Key");
-      expect(labels[1].textContent).eql("CustomName");
+      expect(labels[0].textContent).eql("property1 Key");
+      expect(labels[1].textContent).eql("property1");
+    });
+
+    it("uiSchema title should update additionalProperties object title", () => {
+      const objectSchema = {
+        type: "object",
+        properties: {
+          main: {
+            type: "object",
+            properties: {},
+            additionalProperties: {
+              type: "object",
+              title: "propTitle",
+              properties: {
+                firstName: {
+                  type: "string",
+                  title: "First name",
+                },
+              },
+            },
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema: objectSchema,
+        uiSchema: {
+          main: {
+            additionalProperties: {
+              "ui:title": "CustomName",
+            },
+          },
+        },
+        formData: {
+          main: {
+            property1: {
+              firstName: "hello",
+            },
+          },
+        },
+      });
+      const labels = [...node.querySelectorAll("label.control-label")].map(
+        (n) => n.textContent
+      );
+      expect(labels).to.include("property1 Key");
+      const objectTitle = node.querySelector(
+        ".form-additional > fieldset > legend"
+      );
+      expect(objectTitle.textContent).eql("CustomName");
     });
 
     it("should not throw validation errors if additionalProperties is undefined", () => {