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

Author: Rani

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";
@@ -236,10 +237,14 @@ function SchemaFieldRender<T, F>(props: FieldProps<T, F>) {
 
   // If this schema has a title defined, but the user has set a new key/label, retain their input.
   let label;
+  console.log("hello");
+  console.warn({ schema, name, wasPropertyKeyModified });
   if (wasPropertyKeyModified) {
     label = name;
   } else {
-    label = uiOptions.title || props.schema.title || schema.title || name;
+    label = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG)
+      ? name
+      : uiOptions.title || props.schema.title || schema.title || name;
   }
 
   const description =
@@ -305,6 +310,7 @@ function SchemaFieldRender<T, F>(props: FieldProps<T, F>) {
   return (
     <FieldTemplate {...fieldProps}>
       <>
+        <div>hello</div>
         {field}
         {/*
         If the schema `anyOf` or 'oneOf' can be rendered as a select control, don't

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", () => {