@rjsf/core 6.0.0-beta.2 → 6.0.0-beta.21

package/src/components/fields/LayoutGridField.tsx

@@ -3,6 +3,8 @@ import {
   ANY_OF_KEY,
   ErrorSchema,
   FieldProps,
+  FieldPathId,
+  FieldPathList,
   FormContextType,
   GenericObjectType,
   getDiscriminatorFieldFromSchema,
@@ -11,20 +13,19 @@ import {
   getUiOptions,
   hashObject,
   ID_KEY,
-  IdSchema,
   lookupFromFormContext,
-  mergeObjects,
   ONE_OF_KEY,
   PROPERTIES_KEY,
   READONLY_KEY,
   RJSFSchema,
   Registry,
-  SchemaUtilsType,
   StrictRJSFSchema,
+  toFieldPathId,
   UI_OPTIONS_KEY,
+  UI_GLOBAL_OPTIONS_KEY,
   UiSchema,
+  ITEMS_KEY,
 } from '@rjsf/utils';
-import cloneDeep from 'lodash/cloneDeep';
 import each from 'lodash/each';
 import flatten from 'lodash/flatten';
 import get from 'lodash/get';
@@ -38,6 +39,7 @@ import isObject from 'lodash/isObject';
 import isPlainObject from 'lodash/isPlainObject';
 import isString from 'lodash/isString';
 import isUndefined from 'lodash/isUndefined';
+import last from 'lodash/last';
 import set from 'lodash/set';
 
 /** The enumeration of the three different Layout GridTemplate type values
@@ -101,10 +103,6 @@ export const LAYOUT_GRID_UI_OPTION = 'layoutGrid';
  */
 export const LAYOUT_GRID_OPTION = `ui:${LAYOUT_GRID_UI_OPTION}`;
 
-/** The constant representing the global UI Options object potentially contained within the `uiSchema`
- */
-export const UI_GLOBAL_OPTIONS = 'ui:global_options';
-
 /** Type used to return options list and whether it has a discriminator */
 type OneOfOptionsInfoType<S extends StrictRJSFSchema = RJSFSchema> = { options: S[]; hasDiscriminator: boolean };
 
@@ -133,6 +131,15 @@ function getNonNullishValue<T = unknown>(value?: T, fallback?: T): T | undefined
   return value ?? fallback;
 }
 
+/** Detects if a `str` is made up entirely of numeric characters
+ *
+ * @param str - The string to check to see if it is a numeric index
+ * @return - True if the string consists entirely of numeric characters
+ */
+function isNumericIndex(str: string) {
+  return /^\d+?$/.test(str); // Matches positive integers
+}
+
 /** The `LayoutGridField` will render a schema, uiSchema and formData combination out into a GridTemplate in the shape
  * described in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in
  * the uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):
@@ -386,7 +393,7 @@ export default class LayoutGridField<
     schemaReadonly?: boolean,
     forceReadonly?: boolean,
   ) {
-    const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS], {});
+    const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS_KEY], {});
     const localUiSchema = get(uiSchema, field);
     const localUiOptions = { ...get(localUiSchema, [UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
     const fieldUiSchema = { ...localUiSchema };
@@ -395,7 +402,7 @@ export default class LayoutGridField<
     }
     if (!isEmpty(globalUiOptions)) {
       // pass the global uiOptions down to the field uiSchema so that they can be applied to all nested fields
-      set(fieldUiSchema, [UI_GLOBAL_OPTIONS], globalUiOptions);
+      set(fieldUiSchema, [UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
     }
     let { readonly: uiReadonly } = getUiOptions<T, S, F>(fieldUiSchema);
     if (forceReadonly === true || (isUndefined(uiReadonly) && schemaReadonly === true)) {
@@ -478,25 +485,46 @@ export default class LayoutGridField<
     return { children: children as LayoutGridSchemaType[], gridProps };
   }
 
-  /** Generates an idSchema for the `schema` using `@rjsf`'s `toIdSchema` util, passing the `baseIdSchema`'s `$id` value
-   * as the id prefix.
+  /** Computes the `rawSchema` and `fieldPathId` for a `schema` and a `potentialIndex`. If the `schema` is of type array,
+   * has an `ITEMS_KEY` element and `potentialIndex` represents a numeric value, the element at `ITEMS_KEY` is checked
+   * to see if it is an array. If it is AND the `potentialIndex`th element is available, it is used as the `rawSchema`,
+   * otherwise the last value of the element is used. If it is not, then the element is used as the `rawSchema`. In
+   * either case, an `fieldPathId` is computed for the array index. If the `schema` does not represent an array or the
+   * `potentialIndex` is not a numeric value, then `rawSchema` is returned as undefined and given `fieldPathId` is returned
+   * as is.
    *
-   * @param schemaUtils - The `SchemaUtilsType` used to call `toIdSchema`
-   * @param schema - The schema to generate the idSchema for
-   * @param baseIdSchema - The IdSchema for the base
-   * @param formData - The formData to pass the `toIdSchema`
-   * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
-   * @returns - The generated `idSchema` for the `schema`
+   * @param schema - The schema to generate the fieldPathId for
+   * @param fieldPathId - The FieldPathId for the schema
+   * @param potentialIndex - A string containing a potential index
+   * @returns - An object containing the `rawSchema` and `fieldPathId` of an array item, otherwise an undefined `rawSchema`
    */
-  static getIdSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-    schemaUtils: SchemaUtilsType<T, S, F>,
-    baseIdSchema: IdSchema<T>,
-    formData: FieldProps['formData'],
-    schema: S = {} as S,
-    idSeparator?: string,
-  ): FieldProps<T, S, F>['idSchema'] {
-    const baseId = get(baseIdSchema, ID_KEY);
-    return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
+  static computeArraySchemasIfPresent<S extends StrictRJSFSchema = RJSFSchema>(
+    schema: S | undefined,
+    fieldPathId: FieldPathId,
+    potentialIndex: string,
+  ): {
+    rawSchema?: S;
+    fieldPathId: FieldPathId;
+  } {
+    let rawSchema: S | undefined;
+    if (isNumericIndex(potentialIndex) && schema && schema?.type === 'array' && has(schema, ITEMS_KEY)) {
+      const index = Number(potentialIndex);
+      const items = schema[ITEMS_KEY];
+      if (Array.isArray(items)) {
+        if (index > items.length) {
+          rawSchema = last(items) as S;
+        } else {
+          rawSchema = items[index] as S;
+        }
+      } else {
+        rawSchema = items as S;
+      }
+      fieldPathId = {
+        [ID_KEY]: fieldPathId[ID_KEY],
+        path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index],
+      };
+    }
+    return { rawSchema, fieldPathId };
   }
 
   /** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
@@ -504,31 +532,30 @@ export default class LayoutGridField<
    * element in the path. If the leaf schema element happens to be a oneOf/anyOf then also return the oneOf/anyOf as
    * `options`.
    *
-   * @param schemaUtils - The `SchemaUtilsType` used to call `retrieveSchema`
+   * @param registry - The registry
    * @param dottedPath - The dotted-path to the field for which to get the schema
    * @param initialSchema - The initial schema to start the search from
    * @param formData - The formData, useful for resolving a oneOf/anyOf selection in the path hierarchy
-   * @param initialIdSchema - The initial idSchema to start the search from
-   * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+   * @param initialFieldIdPath - The initial fieldPathId to start the search from
    * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
    *            info if a oneOf/anyOf
    */
   static getSchemaDetailsForField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-    schemaUtils: SchemaUtilsType<T, S, F>,
+    registry: Registry<T, S, F>,
     dottedPath: string,
     initialSchema: S,
     formData: FieldProps<T, S, F>['formData'],
-    initialIdSchema: IdSchema<T>,
-    idSeparator?: string,
+    initialFieldIdPath: FieldPathId,
   ): {
     schema?: S;
     isRequired: boolean;
     isReadonly?: boolean;
     optionsInfo?: OneOfOptionsInfoType<S>;
-    idSchema: IdSchema<T>;
+    fieldPathId: FieldPathId;
   } {
+    const { schemaUtils, globalFormOptions } = registry;
     let rawSchema: S = initialSchema;
-    let idSchema = initialIdSchema;
+    let fieldPathId = initialFieldIdPath;
     const parts: string[] = dottedPath.split('.');
     const leafPath: string | undefined = parts.pop(); // pop off the last element in the list as the leaf
     let schema: S | undefined = schemaUtils.retrieveSchema(rawSchema, formData); // always returns an object
@@ -538,24 +565,18 @@ export default class LayoutGridField<
     // For all the remaining path parts
     parts.forEach((part) => {
       // dive into the properties of the current schema (when it exists) and get the schema for the next part
+      fieldPathId = toFieldPathId(part, globalFormOptions, fieldPathId);
       if (has(schema, PROPERTIES_KEY)) {
         rawSchema = get(schema, [PROPERTIES_KEY, part], {}) as S;
-        idSchema = get(idSchema, part, {}) as IdSchema<T>;
       } else if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
         const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
         // When the schema represents a oneOf/anyOf, find the selected schema for it and grab the inner part
         const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
-        const selectedIdSchema = LayoutGridField.getIdSchema<T, S, F>(
-          schemaUtils,
-          idSchema,
-          formData,
-          selectedSchema,
-          idSeparator,
-        );
         rawSchema = get(selectedSchema, [PROPERTIES_KEY, part], {}) as S;
-        idSchema = get(selectedIdSchema, part, {}) as IdSchema<T>;
       } else {
-        rawSchema = {} as S;
+        const result = LayoutGridField.computeArraySchemasIfPresent<S>(schema, fieldPathId, part);
+        rawSchema = result.rawSchema ?? ({} as S);
+        fieldPathId = result.fieldPathId;
       }
       // Now drill into the innerData for the part, returning an empty object by default if it doesn't exist
       innerData = get(innerData, part, {}) as T;
@@ -576,16 +597,19 @@ export default class LayoutGridField<
         const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
         // Grab the selected schema for the oneOf/anyOf value for the leafPath using the innerData
         schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
-        // Generate the idSchema for the oneOf/anyOf value then merge with the existing `idSchema`
-        const rawIdSchema = LayoutGridField.getIdSchema<T, S, F>(schemaUtils, idSchema, formData, schema, idSeparator);
-        idSchema = mergeObjects(rawIdSchema, idSchema) as IdSchema<T>;
       }
+      fieldPathId = toFieldPathId(leafPath, globalFormOptions, fieldPathId);
       isRequired = schema !== undefined && Array.isArray(schema.required) && includes(schema.required, leafPath);
-      // Now grab the schema from the leafPath of the current schema properties
-      schema = get(schema, [PROPERTIES_KEY, leafPath]) as S | undefined;
-      // Resolve any `$ref`s for the current schema
-      schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
-      idSchema = get(idSchema, leafPath, {}) as IdSchema<T>;
+      const result = LayoutGridField.computeArraySchemasIfPresent<S>(schema, fieldPathId, leafPath);
+      if (result.rawSchema) {
+        schema = result.rawSchema;
+        fieldPathId = result.fieldPathId;
+      } else {
+        // Now grab the schema from the leafPath of the current schema properties
+        schema = get(schema, [PROPERTIES_KEY, leafPath]) as S | undefined;
+        // Resolve any `$ref`s for the current schema
+        schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+      }
       isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
       if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
         const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
@@ -595,7 +619,7 @@ export default class LayoutGridField<
       }
     }
 
-    return { schema, isRequired, isReadonly, optionsInfo, idSchema };
+    return { schema, isRequired, isReadonly, optionsInfo, fieldPathId };
   }
 
   /** Gets the custom render component from the `render`, by either determining that it is either already a function or
@@ -640,7 +664,7 @@ export default class LayoutGridField<
     if (isString(gridSchema) || isUndefined(gridSchema)) {
       name = gridSchema ?? '';
     } else {
-      const { name: innerName, render, ...innerProps } = gridSchema;
+      const { name: innerName = '', render, ...innerProps } = gridSchema;
       name = innerName;
       uiProps = innerProps;
       if (!isEmpty(uiProps)) {
@@ -676,19 +700,12 @@ export default class LayoutGridField<
    * elements, they will then be passed on to the `onChange` handler of the `LayoutFieldGrid`.
    *
    * @param dottedPath - The dotted-path to the field for which to generate the onChange handler
-   * @returns - The `onChange` handling function for the `dottedPath` field
+   * @returns - The `onChange` handling function for the `dottedPath` field of the `schemaType` type
    */
   onFieldChange = (dottedPath: string) => {
-    return (value: unknown, errSchema?: ErrorSchema<T>, id?: string) => {
-      const { onChange, errorSchema, formData } = this.props;
-      const newFormData = cloneDeep(formData || ({} as T));
-      let newErrorSchema = errorSchema;
-      if (errSchema && errorSchema) {
-        newErrorSchema = cloneDeep(errorSchema);
-        set(newErrorSchema, dottedPath, errSchema);
-      }
-      set(newFormData as object, dottedPath, value);
-      onChange(newFormData, newErrorSchema, id);
+    return (value: T | undefined, path: FieldPathList, errSchema?: ErrorSchema<T>, id?: string) => {
+      const { onChange } = this.props;
+      onChange(value, path, errSchema, id);
     };
   };
 
@@ -792,21 +809,21 @@ export default class LayoutGridField<
     );
   }
 
-  /** Iterates through all the `childrenLayoutGridSchema`, rendering a nested `LayoutGridField` for each item in the
+  /** Iterates through all the `childrenLayoutGrfieldPathId`, rendering a nested `LayoutGridField` for each item in the
    * list, passing all the props for the current `LayoutGridField` along, updating the `schema` by calling
    * `retrieveSchema()` on it to resolve any `$ref`s. In addition to the updated `schema`, each item in
-   * `childrenLayoutGridSchema` is passed as `layoutGridSchema`.
+   * `childrenLayoutGrfieldPathId` is passed as `layoutGridSchema`.
    *
-   * @param childrenLayoutGridSchema - The list of strings or objects that represents the configurations for the
+   * @param childrenLayoutGrfieldPathId - The list of strings or objects that represents the configurations for the
    *          children fields
    * @returns - The nested `LayoutGridField`s
    */
-  renderChildren(childrenLayoutGridSchema: LayoutGridSchemaType[]) {
+  renderChildren(childrenLayoutGrfieldPathId: LayoutGridSchemaType[]) {
     const { registry, schema: rawSchema, formData } = this.props;
     const { schemaUtils } = registry;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData);
 
-    return childrenLayoutGridSchema.map((layoutGridSchema) => (
+    return childrenLayoutGrfieldPathId.map((layoutGridSchema) => (
       <LayoutGridField<T, S, F>
         {...this.props}
         key={`layoutGrid-${hashObject(layoutGridSchema)}`}
@@ -822,7 +839,7 @@ export default class LayoutGridField<
    * specified props for that component. If `name` exists, we take the name, the initial & root schemas and the formData
    * and get the destination schema, is required state and optional oneOf/anyOf options for it. If the destination
    * schema was located along with oneOf/anyOf options then a `LayoutMultiSchemaField` will be rendered with the
-   * `uiSchema`, `errorSchema`, `idSchema` and `formData` drilled down to the dotted-path field, spreading any other
+   * `uiSchema`, `errorSchema`, `fieldPathId` and `formData` drilled down to the dotted-path field, spreading any other
    * props from `gridSchema` into the `ui:options`. If the destination schema located without any oneOf/anyOf options,
    * then a `SchemaField` will be rendered with the same props as mentioned in the previous sentence. If no destination
    * schema was located, but a custom render component was found, then it will be rendered with many of the non-event
@@ -836,17 +853,16 @@ export default class LayoutGridField<
       schema: initialSchema,
       uiSchema,
       errorSchema,
-      idSchema,
+      fieldPathId,
       onBlur,
       onFocus,
       formData,
       readonly,
       registry,
-      idSeparator,
       layoutGridSchema, // Used to pull this out of otherProps since we don't want to pass it through
       ...otherProps
     } = this.props;
-    const { fields, schemaUtils } = registry;
+    const { fields } = registry;
     const { SchemaField, LayoutMultiSchemaField } = fields;
     const uiComponentProps = LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
     if (uiComponentProps.rendered) {
@@ -858,15 +874,8 @@ export default class LayoutGridField<
       isRequired,
       isReadonly,
       optionsInfo,
-      idSchema: fieldIdSchema,
-    } = LayoutGridField.getSchemaDetailsForField<T, S, F>(
-      schemaUtils,
-      name,
-      initialSchema,
-      formData,
-      idSchema,
-      idSeparator,
-    );
+      fieldPathId: fieldIdSchema,
+    } = LayoutGridField.getSchemaDetailsForField<T, S, F>(registry, name, initialSchema, formData, fieldPathId);
 
     if (schema) {
       const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField : SchemaField;
@@ -897,8 +906,7 @@ export default class LayoutGridField<
           schema={schema}
           uiSchema={fieldUiSchema}
           errorSchema={get(errorSchema, name)}
-          idSchema={fieldIdSchema}
-          idSeparator={idSeparator}
+          fieldPathId={fieldIdSchema}
           formData={get(formData, name)}
           onChange={this.onFieldChange(name)}
           onBlur={onBlur}
@@ -921,8 +929,7 @@ export default class LayoutGridField<
           errorSchema={errorSchema}
           uiSchema={uiSchema}
           schema={initialSchema}
-          idSchema={idSchema}
-          idSeparator={idSeparator}
+          fieldPathId={fieldPathId}
           onBlur={onBlur}
           onFocus={onFocus}
           registry={registry}

package/src/components/fields/LayoutHeaderField.tsx

@@ -9,7 +9,7 @@ import {
   TemplatesType,
 } from '@rjsf/utils';
 
-/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `idSchema`
+/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `fieldPathId`
  * and whether it is `required` from the props. The `title` is derived from the props as follows:
  * - If there is a title in the `uiSchema`, it is displayed
  * - Else, if there is an explicit `title` passed in the props, it is displayed
@@ -23,7 +23,7 @@ export default function LayoutHeaderField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldProps<T, S, F>) {
-  const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+  const { fieldPathId, title, schema, uiSchema, required, registry, name } = props;
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
   const { title: uiTitle } = options;
   const { title: schemaTitle } = schema;
@@ -38,7 +38,7 @@ export default function LayoutHeaderField<
   );
   return (
     <TitleFieldTemplate
-      id={titleId<T>(idSchema)}
+      id={titleId(fieldPathId)}
       title={fieldTitle}
       required={required}
       schema={schema}

package/src/components/fields/LayoutMultiSchemaField.tsx

@@ -96,7 +96,7 @@ export default function LayoutMultiSchemaField<
     baseType,
     disabled = false,
     formData,
-    idSchema,
+    fieldPathId,
     onBlur,
     onChange,
     options,
@@ -113,7 +113,7 @@ export default function LayoutMultiSchemaField<
   } = props;
   const { widgets, schemaUtils, globalUiOptions } = registry;
   const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData)!);
-  const id = get(idSchema, ID_KEY);
+  const id = get(fieldPathId, ID_KEY);
   const discriminator = getDiscriminatorFieldFromSchema(schema);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, options);
   const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, options);
@@ -171,14 +171,15 @@ export default function LayoutMultiSchemaField<
     if (newFormData) {
       set(newFormData, selectorField, opt);
     }
-    onChange(newFormData, undefined, id);
+    // Pass the component name in the path
+    onChange(newFormData, fieldPathId.path, undefined, id);
   };
 
   // filtering the options based on the type of widget because `selectField` does not recognize the `convertOther` prop
   const widgetOptions = { enumOptions, ...uiOptions };
   const errors =
     !hideFieldError && rawErrors.length > 0 ? (
-      <FieldErrorTemplate idSchema={idSchema} schema={schema} errors={rawErrors} registry={registry} />
+      <FieldErrorTemplate fieldPathId={fieldPathId} schema={schema} errors={rawErrors} registry={registry} />
     ) : undefined;
   const ignored = (value: string) => noop;
 
@@ -189,7 +190,6 @@ export default function LayoutMultiSchemaField<
       label={(title || schema.title) ?? ''}
       disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))}
       uiSchema={uiSchema}
-      formContext={formContext}
       required={required}
       readonly={!!readonly}
       registry={registry}

package/src/components/fields/MultiSchemaField.tsx

@@ -9,6 +9,7 @@ import {
   FieldProps,
   FormContextType,
   getDiscriminatorFieldFromSchema,
+  getTemplate,
   getUiOptions,
   getWidget,
   mergeSchemas,
@@ -64,7 +65,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    * @param prevState - The previous `AnyOfFieldState` for this template
    */
   componentDidUpdate(prevProps: Readonly<FieldProps<T, S, F>>, prevState: Readonly<AnyOfFieldState>) {
-    const { formData, options, idSchema } = this.props;
+    const { formData, options, fieldPathId } = this.props;
     const { selectedOption } = this.state;
     let newState = this.state;
     if (!deepEquals(prevProps.options, options)) {
@@ -75,7 +76,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       const retrievedOptions = options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData));
       newState = { selectedOption, retrievedOptions };
     }
-    if (!deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
+    if (!deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
       const { retrievedOptions } = newState;
       const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
 
@@ -113,7 +114,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    */
   onOptionChange = (option?: string) => {
     const { selectedOption, retrievedOptions } = this.state;
-    const { formData, onChange, registry } = this.props;
+    const { formData, onChange, registry, fieldPathId } = this.props;
     const { schemaUtils } = registry;
     const intOption = option !== undefined ? parseInt(option, 10) : -1;
     if (intOption === selectedOption) {
@@ -130,13 +131,13 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     }
 
     this.setState({ selectedOption: intOption }, () => {
-      onChange(newFormData, undefined, this.getFieldId());
+      onChange(newFormData, fieldPathId.path, undefined, this.getFieldId());
     });
   };
 
   getFieldId() {
-    const { idSchema, schema } = this.props;
-    return `${idSchema.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
+    const { fieldPathId, schema } = this.props;
+    return `${fieldPathId.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
   }
 
   /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
@@ -157,6 +158,12 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
 
     const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
     const { SchemaField: _SchemaField } = fields;
+    const MultiSchemaFieldTemplate = getTemplate<'MultiSchemaFieldTemplate', T, S, F>(
+      'MultiSchemaFieldTemplate',
+      registry,
+      globalUiOptions,
+    );
+
     const { selectedOption, retrievedOptions } = this.state;
     const {
       widget = 'select',
@@ -215,36 +222,45 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       };
     });
 
+    const selector = (
+      <Widget
+        id={this.getFieldId()}
+        name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
+        schema={{ type: 'number', default: 0 } as S}
+        onChange={this.onOptionChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        disabled={disabled || isEmpty(enumOptions)}
+        multiple={false}
+        rawErrors={rawErrors}
+        errorSchema={fieldErrorSchema}
+        value={selectedOption >= 0 ? selectedOption : undefined}
+        options={{ enumOptions, ...uiOptions }}
+        registry={registry}
+        formContext={formContext}
+        placeholder={placeholder}
+        autocomplete={autocomplete}
+        autofocus={autofocus}
+        label={title ?? name}
+        hideLabel={!displayLabel}
+        readonly={readonly}
+      />
+    );
+
+    const optionsSchemaField =
+      (optionSchema && optionSchema.type !== 'null' && (
+        <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
+      )) ||
+      null;
+
     return (
-      <div className='panel panel-default panel-body'>
-        <div className='form-group'>
-          <Widget
-            id={this.getFieldId()}
-            name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
-            schema={{ type: 'number', default: 0 } as S}
-            onChange={this.onOptionChange}
-            onBlur={onBlur}
-            onFocus={onFocus}
-            disabled={disabled || isEmpty(enumOptions)}
-            multiple={false}
-            rawErrors={rawErrors}
-            errorSchema={fieldErrorSchema}
-            value={selectedOption >= 0 ? selectedOption : undefined}
-            options={{ enumOptions, ...uiOptions }}
-            registry={registry}
-            formContext={formContext}
-            placeholder={placeholder}
-            autocomplete={autocomplete}
-            autofocus={autofocus}
-            label={title ?? name}
-            hideLabel={!displayLabel}
-            readonly={readonly}
-          />
-        </div>
-        {optionSchema && optionSchema.type !== 'null' && (
-          <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
-        )}
-      </div>
+      <MultiSchemaFieldTemplate
+        schema={schema}
+        registry={registry}
+        uiSchema={uiSchema}
+        selector={selector}
+        optionSchemaField={optionsSchemaField}
+      />
     );
   }
 }

package/src/components/fields/NullField.tsx

@@ -9,12 +9,12 @@ import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf
 function NullField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: FieldProps<T, S, F>,
 ) {
-  const { formData, onChange } = props;
+  const { formData, onChange, fieldPathId } = props;
   useEffect(() => {
     if (formData === undefined) {
-      onChange(null as unknown as T);
+      onChange(null as unknown as T, fieldPathId.path);
     }
-  }, [formData, onChange]);
+  }, [fieldPathId, formData, onChange]);
 
   return null;
 }

package/src/components/fields/NumberField.tsx

@@ -1,5 +1,13 @@
 import { useState, useCallback } from 'react';
-import { asNumber, ErrorSchema, FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  asNumber,
+  ErrorSchema,
+  FieldPathList,
+  FieldProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 // Matches a string that ends in a . character, optionally followed by a sequence of
 // digits followed by any number of 0 characters up until the end of the line.
@@ -44,7 +52,7 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
    * @param value - The current value for the change occurring
    */
   const handleChange = useCallback(
-    (value: FieldProps<T, S, F>['value'], errorSchema?: ErrorSchema<T>, id?: string) => {
+    (value: FieldProps<T, S, F>['value'], path: FieldPathList, errorSchema?: ErrorSchema<T>, id?: string) => {
       // Cache the original value in component state
       setLastValue(value);
 
@@ -62,7 +70,7 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
           ? asNumber(value.replace(trailingCharMatcher, ''))
           : asNumber(value);
 
-      onChange(processed as unknown as T, errorSchema, id);
+      onChange(processed as unknown as T, path, errorSchema, id);
     },
     [onChange],
   );