Fix 4819 by modifying the id of the outer FieldComponent render (#4823)

Fixed #4819 by modifying the id for the outer `FieldComponent` render when a `XxxOfField` component is also being rendered
- In `@rjsf/core`, updated `SchemaField` to add a new optional property `childFieldPathId` to the `FieldComponent` render to prevent duplicate ids
  - Also updated `ObjectField` and `ArrayField` to make children use the `childFieldPathId` if present, falling back to the `fieldPathId` if not
  - Fixed the places in the `XxxOf` tests where the new outer id changed the `description` ids the test was looking for
- Updated `CHANGELOG.md` accordingly

# Conflicts:
#	CHANGELOG.md

Author: heath-freenome

CHANGELOG.md

@@ -17,6 +17,11 @@ should change the heading of the (upcoming) version to include a major version b
 -->
 # 6.0.0
 
+## @rjsf/core
+
+- Updated `SchemaField` to add a new optional property `childFieldPathId` to the `FieldComponent` render to prevent duplicate ids, fixing (#4819)[https://github.com/rjsf-team/react-jsonschema-form/issues/4819]
+    - Also updated `ObjectField` and `ArrayField` to make children use the `childFieldPathId` if present, falling back to the `fieldPathId` if not
+
 ## Dev / docs / playground
 
 - Updated the libraries to the latest ones that aren't problematic

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

@@ -567,7 +567,11 @@ function NormalArray<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const canAdd = canAddItem<T, S, F>(registry, schema, formData, uiSchema) && (!renderOptionalField || hasFormData);
   const actualFormData = hasFormData ? keyedFormData : [];
   const extraClass = renderOptionalField ? ' rjsf-optional-array-field' : '';
-  const optionalDataControl = renderOptionalField ? <OptionalDataControlsField {...props} /> : undefined;
+  // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
+  const childFieldPathId = props.childFieldPathId ?? fieldPathId;
+  const optionalDataControl = renderOptionalField ? (
+    <OptionalDataControlsField {...props} fieldPathId={childFieldPathId} />
+  ) : undefined;
   const arrayProps: ArrayFieldTemplateProps<T[], S, F> = {
     canAdd,
     items: actualFormData.map((keyedItem, index: number) => {
@@ -576,7 +580,7 @@ function NormalArray<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       const itemCast = item as unknown as T[];
       const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
       const itemErrorSchema = errorSchema ? (errorSchema[index] as ErrorSchema<T[]>) : undefined;
-      const itemFieldPathId = toFieldPathId(index, globalFormOptions, fieldPathId);
+      const itemFieldPathId = toFieldPathId(index, globalFormOptions, childFieldPathId);
 
       // Compute the item UI schema using the helper method
       const itemUiSchema = computeItemUiSchema<T, S, F>(uiSchema, item, index, formContext);
@@ -675,14 +679,18 @@ function FixedArray<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const additionalSchema = isObject(schema.additionalItems)
     ? schemaUtils.retrieveSchema(schema.additionalItems as S, formData)
     : null;
+  // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
+  const childFieldPathId = props.childFieldPathId ?? fieldPathId;
 
   if (items.length < itemSchemas.length) {
     // to make sure at least all fixed items are generated
     items = items.concat(new Array(itemSchemas.length - items.length));
   }
   const actualFormData = hasFormData ? keyedFormData : [];
   const extraClass = renderOptionalField ? ' rjsf-optional-array-field' : '';
-  const optionalDataControl = renderOptionalField ? <OptionalDataControlsField {...props} /> : undefined;
+  const optionalDataControl = renderOptionalField ? (
+    <OptionalDataControlsField {...props} fieldPathId={childFieldPathId} />
+  ) : undefined;
 
   // These are the props passed into the render function
   const canAdd =
@@ -704,7 +712,7 @@ function FixedArray<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
         (additional && isObject(schema.additionalItems)
           ? schemaUtils.retrieveSchema(schema.additionalItems as S, itemCast)
           : itemSchemas[index]) || {};
-      const itemFieldPathId = toFieldPathId(index, globalFormOptions, fieldPathId);
+      const itemFieldPathId = toFieldPathId(index, globalFormOptions, childFieldPathId);
       // Compute the item UI schema - handle both static and dynamic cases
       let itemUiSchema: UiSchema<T[], S, F> | undefined;
       if (additional) {
@@ -834,6 +842,8 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
   const { schema, uiSchema, errorSchema, fieldPathId, registry, formData, onChange } = props;
   const { schemaUtils, translateString } = registry;
   const { keyedFormData, updateKeyedFormData } = useKeyedFormData<T>(formData);
+  // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
+  const childFieldPathId = props.childFieldPathId ?? fieldPathId;
 
   /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
    * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
@@ -871,9 +881,9 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
       } else {
         newKeyedFormData.push(newKeyedFormDataRow);
       }
-      onChange(updateKeyedFormData(newKeyedFormData), fieldPathId.path, newErrorSchema as ErrorSchema<T[]>);
+      onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema as ErrorSchema<T[]>);
     },
-    [keyedFormData, registry, schema, onChange, updateKeyedFormData, errorSchema, fieldPathId],
+    [keyedFormData, registry, schema, onChange, updateKeyedFormData, errorSchema, childFieldPathId],
   );
 
   /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
@@ -911,9 +921,9 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
       } else {
         newKeyedFormData.push(newKeyedFormDataRow);
       }
-      onChange(updateKeyedFormData(newKeyedFormData), fieldPathId.path, newErrorSchema as ErrorSchema<T[]>);
+      onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema as ErrorSchema<T[]>);
     },
-    [keyedFormData, onChange, updateKeyedFormData, errorSchema, fieldPathId],
+    [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId],
   );
 
   /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
@@ -941,9 +951,9 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
         }
       }
       const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
-      onChange(updateKeyedFormData(newKeyedFormData), fieldPathId.path, newErrorSchema as ErrorSchema<T[]>);
+      onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema as ErrorSchema<T[]>);
     },
-    [keyedFormData, onChange, updateKeyedFormData, errorSchema, fieldPathId],
+    [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId],
   );
 
   /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
@@ -985,9 +995,9 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
         return _newKeyedFormData;
       }
       const newKeyedFormData = reOrderArray();
-      onChange(updateKeyedFormData(newKeyedFormData), fieldPathId.path, newErrorSchema as ErrorSchema<T[]>);
+      onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema as ErrorSchema<T[]>);
     },
-    [keyedFormData, onChange, updateKeyedFormData, errorSchema, fieldPathId],
+    [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId],
   );
 
   /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
@@ -1012,9 +1022,9 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
   /** Callback handler used to change the value for a checkbox */
   const onSelectChange = useCallback(
     (value: any) => {
-      onChange(value, fieldPathId.path, undefined, fieldPathId?.[ID_KEY]);
+      onChange(value, childFieldPathId.path, undefined, childFieldPathId?.[ID_KEY]);
     },
-    [onChange, fieldPathId],
+    [onChange, childFieldPathId],
   );
 
   if (!(ITEMS_KEY in schema)) {
@@ -1044,16 +1054,16 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
   };
   if (schemaUtils.isMultiSelect(schema)) {
     // If array has enum or uniqueItems set to true, call renderMultiSelect() to render the default multiselect widget or a custom widget, if specified.
-    return <ArrayAsMultiSelect<T, S, F> {...props} onSelectChange={onSelectChange} />;
+    return <ArrayAsMultiSelect<T, S, F> {...props} fieldPathId={childFieldPathId} onSelectChange={onSelectChange} />;
   }
   if (isCustomWidget<T[], S, F>(uiSchema)) {
-    return <ArrayAsCustomWidget<T, S, F> {...props} onSelectChange={onSelectChange} />;
+    return <ArrayAsCustomWidget<T, S, F> {...props} fieldPathId={childFieldPathId} onSelectChange={onSelectChange} />;
   }
   if (isFixedItems(schema)) {
     return <FixedArray<T, S, F> {...props} {...arrayProps} />;
   }
   if (schemaUtils.isFilesArray(schema, uiSchema)) {
-    return <ArrayAsFiles {...props} onSelectChange={onSelectChange} />;
+    return <ArrayAsFiles {...props} fieldPathId={childFieldPathId} onSelectChange={onSelectChange} />;
   }
   return <NormalArray<T, S, F> {...props} {...arrayProps} />;
 }

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

@@ -221,6 +221,8 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
   const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const { properties: schemaProperties = {} } = schema;
   const formDataHash = hashObject(formData || {});
+  // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
+  const childFieldPathId = props.childFieldPathId ?? fieldPathId;
 
   const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
   const description = uiOptions.description ?? schema.description;
@@ -288,8 +290,8 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       set(newFormData as GenericObjectType, newKey, newValue);
     }
 
-    onChange(newFormData, fieldPathId.path);
-  }, [formData, onChange, registry, fieldPathId, getAvailableKey, schema]);
+    onChange(newFormData, childFieldPathId.path);
+  }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
 
   /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
    * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
@@ -312,10 +314,10 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
         });
         const renamedObj = Object.assign({}, ...keyValues);
 
-        onChange(renamedObj, fieldPathId.path);
+        onChange(renamedObj, childFieldPathId.path);
       }
     },
-    [formData, onChange, fieldPathId, getAvailableKey],
+    [formData, onChange, childFieldPathId, getAvailableKey],
   );
 
   /** Handles the remove click which removes the old `key` data and calls the `onChange` callback with it
@@ -324,9 +326,9 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     (key: string) => {
       const copiedFormData = { ...formData } as T;
       unset(copiedFormData, key);
-      onChange(copiedFormData, fieldPathId.path);
+      onChange(copiedFormData, childFieldPathId.path);
     },
-    [onChange, fieldPathId, formData],
+    [onChange, childFieldPathId, formData],
   );
 
   if (!renderOptionalField || hasFormData) {
@@ -349,7 +351,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
 
   const Template = getTemplate<'ObjectFieldTemplate', T, S, F>('ObjectFieldTemplate', registry, uiOptions);
   const optionalDataControl = renderOptionalField ? (
-    <OptionalDataControlsField {...props} schema={schema} />
+    <OptionalDataControlsField {...props} fieldPathId={childFieldPathId} schema={schema} />
   ) : undefined;
 
   const templateProps = {
@@ -371,7 +373,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
           schema={get(schema, [PROPERTIES_KEY, name], {}) as S}
           uiSchema={fieldUiSchema}
           errorSchema={get(errorSchema, name)}
-          fieldPathId={fieldPathId}
+          fieldPathId={childFieldPathId}
           formData={get(formData, name)}
           handleKeyRename={handleKeyRename}
           handleRemoveProperty={handleRemoveProperty}

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

@@ -5,6 +5,7 @@ import {
   descriptionId,
   ErrorSchema,
   Field,
+  FieldPathId,
   FieldPathList,
   FieldProps,
   FieldTemplateProps,
@@ -20,6 +21,7 @@ import {
   shouldRender,
   shouldRenderOptionalField,
   StrictRJSFSchema,
+  toFieldPathId,
   UI_OPTIONS_KEY,
   UIOptionsType,
 } from '@rjsf/utils';
@@ -103,7 +105,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     registry,
     wasPropertyKeyModified = false,
   } = props;
-  const { schemaUtils, globalUiOptions, fields } = registry;
+  const { schemaUtils, globalFormOptions, globalUiOptions, fields } = registry;
   const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields;
   const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions);
@@ -147,6 +149,9 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const isReplacingAnyOrOneOf = uiOptions.field && uiOptions.fieldReplacesAnyOrOneOf === true;
   let XxxOfField: Field<T, S, F> | undefined;
   let XxxOfOptions: S[] | undefined;
+  // When rendering the `XxxOfField` we'll need to change the fieldPathId of the main component, remembering the
+  // fieldPathId of the children for the ObjectField and ArrayField
+  let fieldPathIdProps: { fieldPathId: FieldPathId; childFieldPathId?: FieldPathId } = { fieldPathId };
   if ((ANY_OF_KEY in schema || ONE_OF_KEY in schema) && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema)) {
     if (schema[ANY_OF_KEY]) {
       XxxOfField = _AnyOfField;
@@ -163,6 +168,12 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     const isOptionalRender = shouldRenderOptionalField<T, S, F>(registry, schema, required, uiSchema);
     const hasFormData = isFormDataAvailable<T>(formData);
     displayLabel = displayLabel && (!isOptionalRender || hasFormData);
+    fieldPathIdProps = {
+      childFieldPathId: fieldPathId,
+      // The main FieldComponent will add `XxxOf` onto the fieldPathId to avoid duplication with the rendering of the
+      // same FieldComponent by the `XxxOfField`
+      fieldPathId: toFieldPathId('XxxOf', globalFormOptions, fieldPathId),
+    };
   }
 
   const { __errors, ...fieldErrorSchema } = errorSchema || {};
@@ -176,7 +187,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     <FieldComponent
       {...props}
       onChange={handleFieldComponentChange}
-      fieldPathId={fieldPathId}
+      {...fieldPathIdProps}
       schema={schema}
       uiSchema={fieldUiSchema}
       disabled={disabled}

packages/core/test/anyOf.test.jsx

@@ -63,7 +63,7 @@ describe('anyOf', () => {
     expect(node.querySelectorAll('select')).to.have.length.of(1);
     expect(node.querySelector('select').id).eql('root__anyof_select');
     expect(node.querySelectorAll('span.required')).to.have.length.of(1);
-    expect(node.querySelectorAll('#root__description')).to.have.length.of(1);
+    expect(node.querySelectorAll('#root_XxxOf__description')).to.have.length.of(1);
     expect(node.querySelectorAll('#root_baz')).to.have.length.of(1);
   });
 

packages/core/test/oneOf.test.jsx

@@ -62,7 +62,7 @@ describe('oneOf', () => {
     expect(node.querySelectorAll('select')).to.have.length.of(1);
     expect(node.querySelector('select').id).eql('root__oneof_select');
     expect(node.querySelectorAll('span.required')).to.have.length.of(1);
-    expect(node.querySelectorAll('#root__description')).to.have.length.of(1);
+    expect(node.querySelectorAll('#root_XxxOf__description')).to.have.length.of(1);
     expect(node.querySelectorAll('#root_baz')).to.have.length.of(1);
   });