Reimplement fix originally in rjsf-team#2199

- Replicated the fix made in rjsf-team#2199 since it is a breaking change and we are doing a bunch of them
- Also updated the `CHANGELOG.md`

Author: heath-freenome

CHANGELOG.md

@@ -20,8 +20,9 @@ should change the heading of the (upcoming) version to include a major version b
 - clear errors on formData change when liveOmit=true when "additionalProperties: false" [issue 1507](https://github.com/rjsf-team/react-jsonschema-form/issues/1507) (https://github.com/rjsf-team/react-jsonschema-form/pull/2631)
 
 ## @rjsf/core
-- Fix overriding core submit button className (https://github.com/rjsf-team/react-jsonschema-form/issues/2979)
+- **BREAKING CHANGE** Fix overriding core submit button className (https://github.com/rjsf-team/react-jsonschema-form/issues/2979)
 - 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)
 
 ## @rjsf/semantic-ui
 - Fix missing error class on fields (https://github.com/rjsf-team/react-jsonschema-form/issues/2666)

docs/5.x upgrade guide.md

@@ -10,7 +10,8 @@ There were several significant **breaking changes** in RJSF version 5 that were
   - [#2762](https://github.com/rjsf-team/react-jsonschema-form/issues/2762)
   - [#2858](https://github.com/rjsf-team/react-jsonschema-form/issues/2858)
   - [#2905](https://github.com/rjsf-team/react-jsonschema-form/issues/2905)
-  - [#2945](https://github.com/rjsf-team/react-jsonschema-form/issues/2945) 
+  - [#2945](https://github.com/rjsf-team/react-jsonschema-form/issues/2945)
+- Fixed `anyOf` and `oneOf` getting incorrect, potentially duplicate ids when combined with array (https://github.com/rjsf-team/react-jsonschema-form/issues/2197)
 
 ### React version
 
@@ -129,6 +130,46 @@ function YourWidget(props: WidgetProps) {
 }
 ```
 
+#### Generate correct ids when arrays are combined with `anyOf`/`oneOf`
+
+In v4, with arrays inside `anyOf` or `oneOf`, the parent name was not used to generate ids.
+For example, given a schema such as:
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "items": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "anyOf": [
+          {
+            "properties": {
+              "foo": {
+                "type": "string",
+              },
+            },
+          },
+          {
+            "properties": {
+              "bar": {
+                "type": "string",
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+}
+```
+
+We would get fields with id `root_foo` and `root_bar`.
+As you can imagine, we could end up with duplicated ids if there's actually a `foo` or a `bar` in the root of the schema.
+
+From v5, the child fields will correctly use the parent id when generating its own id, generating ids such as `root_items_0_foo`.
+
 ### `@rjsf/material-ui` BREAKING CHANGES
 
 This theme was simplified back to working only with Material UI version 4 after an unsuccessful attempt to have it fully support both versions 4 and 5 simultaneously.

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

@@ -172,7 +172,13 @@ function SchemaFieldRender<T, F>(props: FieldProps<T, F>) {
   >("DescriptionFieldTemplate", registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
   const idSchema = mergeObjects(
-    schemaUtils.toIdSchema(schema, undefined, formData, idPrefix, idSeparator),
+    schemaUtils.toIdSchema(
+      schema,
+      _idSchema.$id,
+      formData,
+      idPrefix,
+      idSeparator
+    ),
     _idSchema
   ) as IdSchema<T>;
   const FieldComponent = getFieldComponent(

packages/core/test/anyOf_test.js

@@ -810,7 +810,9 @@ describe("anyOf", () => {
 
       expect(node.querySelectorAll("select")).to.have.length.of(1);
 
-      expect(node.querySelectorAll("input#root_foo")).to.have.length.of(1);
+      expect(node.querySelectorAll("input#root_items_0_foo")).to.have.length.of(
+        1
+      );
     });
 
     it("should not change the selected option when switching order of items for anyOf inside array items", () => {
@@ -995,8 +997,12 @@ describe("anyOf", () => {
         target: { value: $select.options[1].value },
       });
 
-      expect(node.querySelectorAll("input#root_foo")).to.have.length.of(1);
-      expect(node.querySelectorAll("input#root_bar")).to.have.length.of(1);
+      expect(node.querySelectorAll("input#root_items_0_foo")).to.have.length.of(
+        1
+      );
+      expect(node.querySelectorAll("input#root_items_0_bar")).to.have.length.of(
+        1
+      );
     });
 
     it("should correctly infer the selected option based on value", () => {
@@ -1075,13 +1081,18 @@ describe("anyOf", () => {
         },
       });
 
-      const idSelects = node.querySelectorAll("select#root_id");
+      const rootId = node.querySelector("select#root_id");
+      expect(rootId.value).eql("chain");
+      const componentId = node.querySelector("select#root_components_0_id");
+      expect(componentId.value).eql("map");
 
-      expect(idSelects).to.have.length(4);
-      expect(idSelects[0].value).eql("chain");
-      expect(idSelects[1].value).eql("map");
-      expect(idSelects[2].value).eql("transform");
-      expect(idSelects[3].value).eql("to_absolute");
+      const fnId = node.querySelector("select#root_components_0_fn_id");
+      expect(fnId.value).eql("transform");
+
+      const transformerId = node.querySelector(
+        "select#root_components_0_fn_transformer_id"
+      );
+      expect(transformerId.value).eql("to_absolute");
     });
   });
   describe("hideError works with anyOf", () => {

packages/core/test/oneOf_test.js

@@ -493,8 +493,9 @@ describe("oneOf", () => {
     });
 
     expect($select.value).eql("1");
+    console.log(node.innerHTML);
 
-    Simulate.change(node.querySelector("input#root_bar"), {
+    Simulate.change(node.querySelector("input#root_items_bar"), {
       target: { value: "Lorem ipsum dolor sit amet" },
     });
 
@@ -584,8 +585,12 @@ describe("oneOf", () => {
         target: { value: $select.options[1].value },
       });
 
-      expect(node.querySelectorAll("input#root_foo")).to.have.length.of(1);
-      expect(node.querySelectorAll("input#root_bar")).to.have.length.of(1);
+      expect(node.querySelectorAll("input#root_items_0_foo")).to.have.length.of(
+        1
+      );
+      expect(node.querySelectorAll("input#root_items_0_bar")).to.have.length.of(
+        1
+      );
     });
   });
 
@@ -767,13 +772,18 @@ describe("oneOf", () => {
       },
     });
 
-    const idSelects = node.querySelectorAll("select#root_id");
+    const rootId = node.querySelector("select#root_id");
+    expect(rootId.value).eql("chain");
+    const componentId = node.querySelector("select#root_components_0_id");
+    expect(componentId.value).eql("map");
 
-    expect(idSelects).to.have.length(4);
-    expect(idSelects[0].value).eql("chain");
-    expect(idSelects[1].value).eql("map");
-    expect(idSelects[2].value).eql("transform");
-    expect(idSelects[3].value).eql("to_absolute");
+    const fnId = node.querySelector("select#root_components_0_fn_id");
+    expect(fnId.value).eql("transform");
+
+    const transformerId = node.querySelector(
+      "select#root_components_0_fn_transformer_id"
+    );
+    expect(transformerId.value).eql("to_absolute");
   });
 
   describe("Custom Field", function () {