Feature: Add new prop duplicateKeySuffixSeparator for additionalProperties

CHANGELOG.md

@@ -24,6 +24,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Fix `ui:field` with anyOf or oneOf no longer rendered twice (#2890)
 - **BREAKING CHANGE** Fixed `anyOf` and `oneOf` getting incorrect, potentially duplicate ids when combined with array (https://github.com/rjsf-team/react-jsonschema-form/issues/2197)
 - `formContext` is now passed properly to `SchemaField`, fixes (https://github.com/rjsf-team/react-jsonschema-form/issues/2394, https://github.com/rjsf-team/react-jsonschema-form/issues/2274) 
+- Added `ui:duplicateKeySuffixSeparator` to customize how duplicate object keys are renamed when using `additionalProperties`.
 
 ## @rjsf/antd
 - Fix esm build to use `@rollup/plugin-replace` to replace `antd/lib` and `rc-picker/lib` with `antd/es` and `rc-picker/es` respectively, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2962)

docs/api-reference/uiSchema.md

@@ -290,6 +290,12 @@ const uiSchema = {
   }
 };
 ```
+
+## `duplicateKeySuffixSeparator` option
+
+When using `additionalProperties`, key collision is prevented by appending a unique integer suffix to the duplicate key. For example, when you add a key named `myKey` to a form where `myKey` is already defined, then your new key will become `myKey-1`.
+You can use `ui:duplicateKeySuffixSeparator` to override the default separator, `"-"` with a string of your choice.
+
 ## Theme Options
 [Semantic UI](themes/semantic-ui/uiSchema.md)
 [Chakra UI](themes/chakra-ui/uiSchema.md)

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

@@ -110,10 +110,13 @@ class ObjectField<T = any, F = any> extends Component<
    * @returns - The name of the next available key from `preferredKey`
    */
   getAvailableKey = (preferredKey: string, formData: T) => {
+    const { uiSchema } = this.props;
+    const { duplicateKeySuffixSeparator = "-" } = getUiOptions<T, F>(uiSchema);
+
     let index = 0;
     let newKey = preferredKey;
     while (newKey in formData) {
-      newKey = `${preferredKey}-${++index}`;
+      newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
     }
     return newKey;
   };

packages/core/test/ObjectField_test.js

@@ -687,6 +687,29 @@ describe("ObjectField", () => {
       });
     });
 
+    it("uses a custom separator between the duplicate key name and the suffix", () => {
+      const formData = {
+        first: 1,
+        second: 2,
+      };
+      const { node, onChange } = createFormComponent({
+        schema,
+        formData,
+        uiSchema: {
+          "ui:duplicateKeySuffixSeparator": "_",
+        },
+      });
+
+      const textNode = node.querySelector("#root_first-key");
+      Simulate.blur(textNode, {
+        target: { value: "second" },
+      });
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: { second: 2, second_1: 1 },
+      });
+    });
+
     it("should not attach suffix when input is only clicked", () => {
       const formData = {
         first: 1,

packages/utils/src/types.ts

@@ -641,6 +641,10 @@ type UIOptionsBaseType<T = any, F = any> = Partial<
    * to look up an implementation from the `widgets` list or an actual one-off widget implementation itself
    */
   widget?: Widget<T, F> | string;
+  /** When using `additionalProperties`, key collision is prevented by appending a unique integer to the duplicate key.
+   * This option allows you to change the separator between the original key name and the integer. Default is "-"
+   */
+  duplicateKeySuffixSeparator?: string;
 };
 
 /** The type that represents the Options potentially provided by `ui:options` */