@rjsf/core 6.0.0-beta.13 → 6.0.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.0.0-beta.13",
+  "version": "6.0.0-beta.14",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",
@@ -66,30 +66,30 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "@rjsf/utils": "^6.0.0-beta",
+    "@rjsf/utils": "^6.0.0-beta.14",
     "react": ">=18"
   },
   "dependencies": {
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "markdown-to-jsx": "^7.7.6",
+    "markdown-to-jsx": "^7.7.13",
     "nanoid": "^5.1.5",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rjsf/snapshot-tests": "^6.0.0-beta.13",
-    "@rjsf/utils": "^6.0.0-beta.13",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.13",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.14",
+    "@rjsf/utils": "^6.0.0-beta.14",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.14",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "ajv": "^8.12.0",
+    "ajv": "^8.17.1",
     "atob": "^2.1.2",
     "chai": "^3.5.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.1",
     "html": "^1.0.0",
     "jsdom": "^20.0.3",
-    "mocha": "^10.2.0",
+    "mocha": "^10.8.2",
     "react-portal": "^4.3.0",
     "sinon": "^9.2.4"
   },

package/src/components/Form.tsx

@@ -38,11 +38,13 @@ import {
   createErrorHandler,
   unwrapErrorHandler,
 } from '@rjsf/utils';
+import _cloneDeep from 'lodash/cloneDeep';
 import _forEach from 'lodash/forEach';
 import _get from 'lodash/get';
 import _isEmpty from 'lodash/isEmpty';
 import _isNil from 'lodash/isNil';
 import _pick from 'lodash/pick';
+import _set from 'lodash/set';
 import _toPath from 'lodash/toPath';
 
 import getDefaultRegistry from '../getDefaultRegistry';
@@ -272,6 +274,19 @@ export interface IChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema,
   status?: 'submitted';
 }
 
+/** The definition of a pending change that will be processed in the `onChange` handler
+ */
+interface PendingChange<T> {
+  /** The path into the formData/errorSchema at which the `newValue`/`newErrorSchema` will be set */
+  path?: (number | string)[];
+  /** The new value to set into the formData */
+  newValue?: T;
+  /** The new errors to be set into the errorSchema, if any */
+  newErrorSchema?: ErrorSchema<T>;
+  /** The optional id of the field for which the change is being made */
+  id?: string;
+}
+
 /** The `Form` component renders the outer form and all the fields defined in the `schema` */
 export default class Form<
   T = any,
@@ -283,6 +298,10 @@ export default class Form<
    */
   formElement: RefObject<any>;
 
+  /** The list of pending changes
+   */
+  pendingChanges: PendingChange<T>[] = [];
+
   /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
    * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
    * state construction.
@@ -539,8 +558,7 @@ export default class Form<
     let customValidateErrors = {};
     if (typeof customValidate === 'function') {
       const errorHandler = customValidate(prevFormData, createErrorHandler<T>(prevFormData), uiSchema);
-      const userErrorSchema = unwrapErrorHandler<T>(errorHandler);
-      customValidateErrors = userErrorSchema;
+      customValidateErrors = unwrapErrorHandler<T>(errorHandler);
     }
     return customValidateErrors;
   }
@@ -550,7 +568,8 @@ export default class Form<
    *
    * @param formData - The new form data to validate
    * @param schema - The schema used to validate against
-   * @param altSchemaUtils - The alternate schemaUtils to use for validation
+   * @param [altSchemaUtils] - The alternate schemaUtils to use for validation
+   * @param [retrievedSchema] - An optionally retrieved schema for per
    */
   validate(
     formData: T | undefined,
@@ -655,11 +674,16 @@ export default class Form<
     const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
     const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
     const fieldNames = this.getFieldNames(pathSchema, formData);
-    const newFormData = this.getUsedFormData(formData, fieldNames);
-    return newFormData;
+    return this.getUsedFormData(formData, fieldNames);
   };
 
-  // Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
+  /** Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
+   *
+   * @param schemaErrors - The schema errors to filter
+   * @param [resolvedSchema] - An optionally resolved schema to use for performance reasons
+   * @param [formData] - The formData to help filter errors
+   * @private
+   */
   private filterErrorsBasedOnSchema(schemaErrors: ErrorSchema<T>, resolvedSchema?: S, formData?: any): ErrorSchema<T> {
     const { retrievedSchema, schemaUtils } = this.state;
     const _retrievedSchema = resolvedSchema ?? retrievedSchema;
@@ -705,23 +729,47 @@ export default class Form<
     return filterNilOrEmptyErrors(filteredErrors, prevCustomValidateErrors);
   }
 
-  /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
-   * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
-   * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
-   * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
-   * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
-   * callback will be called if specified with the updated state.
+  /** Pushes the given change information into the `pendingChanges` array and then calls `processPendingChanges()` if
+   * the array only contains a single pending change.
    *
-   * @param formData - The new form data from a change to a field
-   * @param newErrorSchema - The new `ErrorSchema` based on the field change
-   * @param id - The id of the field that caused the change
+   * @param newValue - The new form data from a change to a field
+   * @param [path] - The path to the change into which to set the formData
+   * @param [newErrorSchema] - The new `ErrorSchema` based on the field change
+   * @param [id] - The id of the field that caused the change
+   */
+  onChange = (newValue: T | undefined, path?: (number | string)[], newErrorSchema?: ErrorSchema<T>, id?: string) => {
+    this.pendingChanges.push({ newValue, path, newErrorSchema, id });
+    if (this.pendingChanges.length === 1) {
+      this.processPendingChange();
+    }
+  };
+
+  /** Function to handle changes made to a field in the `Form`. This handler gets the first change from the
+   * `pendingChanges` list, containing the `newValue` for the `formData` and the `path` at which the `newValue` is to be
+   * updated, along with a new, optional `ErrorSchema` for that same `path` and potentially the `id` of the field being
+   * changed. It will first update the `formData` with any missing default fields and then, if `omitExtraData` and
+   * `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not in a form field. Then, the
+   * resulting `formData` will be validated if required. The state will be updated with the new updated (potentially
+   * filtered) `formData`, any errors that resulted from validation. Finally the `onChange` callback will be called, if
+   * specified, with the updated state and the `processPendingChange()` function is called again.
    */
-  onChange = (formData: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
-    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-    const { schemaUtils, schema } = this.state;
+  processPendingChange() {
+    if (this.pendingChanges.length === 0) {
+      return;
+    }
+    const { newValue, path, id } = this.pendingChanges[0];
+    let { newErrorSchema } = this.pendingChanges[0];
+    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, idPrefix = '' } = this.props;
+    const { formData: oldFormData, schemaUtils, schema, errorSchema } = this.state;
 
+    const isRootPath = !path || path.length === 0 || (path.length === 1 && path[0] === idPrefix);
     let retrievedSchema = this.state.retrievedSchema;
+    let formData = isRootPath ? newValue : _cloneDeep(oldFormData);
     if (isObject(formData) || Array.isArray(formData)) {
+      if (!isRootPath) {
+        // If the newValue is not on the root path, then set it into the form data
+        _set(formData, path, newValue);
+      }
       const newState = this.getStateFromProps(this.props, formData);
       formData = newState.formData;
       retrievedSchema = newState.retrievedSchema;
@@ -738,6 +786,13 @@ export default class Form<
       };
     }
 
+    // First update the value in the newErrorSchema in a copy of the old error schema if it was specified and the path
+    // is not the root
+    if (newErrorSchema && !isRootPath) {
+      const errorSchemaCopy = _cloneDeep(errorSchema);
+      _set(errorSchemaCopy, path, newErrorSchema);
+      newErrorSchema = errorSchemaCopy;
+    }
     if (mustValidate) {
       const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
       let errors = schemaValidation.errors;
@@ -762,6 +817,7 @@ export default class Form<
         schemaValidationErrorSchema,
       };
     } else if (!noValidate && newErrorSchema) {
+      // Merging 'newErrorSchema' into 'errorSchema' to display the custom raised errors.
       const errorSchema = extraErrors
         ? (mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates') as ErrorSchema<T>)
         : newErrorSchema;
@@ -771,8 +827,15 @@ export default class Form<
         errors: toErrorList(errorSchema),
       };
     }
-    this.setState(state as FormState<T, S, F>, () => onChange && onChange({ ...this.state, ...state }, id));
-  };
+    this.setState(state as FormState<T, S, F>, () => {
+      if (onChange) {
+        onChange({ ...this.state, ...state }, id);
+      }
+      // Now remove the change we just completed and call this again
+      this.pendingChanges.shift();
+      this.processPendingChange();
+    });
+  }
 
   /**
    * If the retrievedSchema has changed the new retrievedSchema is returned.
@@ -1029,7 +1092,7 @@ export default class Form<
     const {
       children,
       id,
-      idPrefix,
+      idPrefix = '',
       idSeparator,
       className = '',
       tagName,
@@ -1082,7 +1145,7 @@ export default class Form<
       >
         {showErrorList === 'top' && this.renderErrors(registry)}
         <_SchemaField
-          name=''
+          name={idPrefix}
           schema={schema}
           uiSchema={uiSchema}
           errorSchema={errorSchema}

package/src/components/fields/ArrayField.tsx

@@ -22,7 +22,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
-import { nanoid } from 'nanoid';
+import uniqueId from 'lodash/uniqueId';
 
 /** Type used to represent the keyed form data used in the state */
 type KeyedFormDataType<T> = { key: string; item: T };
@@ -37,7 +37,7 @@ type ArrayFieldState<T> = {
 
 /** Used to generate a unique ID for an element in a row */
 function generateRowId() {
-  return nanoid();
+  return uniqueId('rjsf-array-item-');
 }
 
 /** Converts the `formData` into `KeyedFormDataType` data, using the `generateRowId()` function to create the key
@@ -229,7 +229,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         keyedFormData: newKeyedFormData,
         updatedKeyedFormData: true,
       },
-      () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
+      // add click will pass the empty `path` array to the onChange which adds the appropriate path
+      () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema as ErrorSchema<T[]>),
     );
   }
 
@@ -298,7 +299,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
+        // Copy index will pass the empty `path` array to the onChange which adds the appropriate path
+        () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -335,7 +337,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
+        // drop index will pass the empty `path` array to the onChange which adds the appropriate path
+        () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -385,7 +388,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         {
           keyedFormData: newKeyedFormData,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
+        // reorder click will pass the empty `path` array to the onChange which adds the appropriate path
+        () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -396,22 +400,17 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    * @param index - The index of the item being changed
    */
   onChangeForIndex = (index: number) => {
-    return (value: any, newErrorSchema?: ErrorSchema<T>, id?: string) => {
-      const { formData, onChange, errorSchema } = this.props;
-      const arrayData = Array.isArray(formData) ? formData : [];
-      const newFormData = arrayData.map((item: T, i: number) => {
+    return (value: any, path?: (number | string)[], newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      const { onChange } = this.props;
+      // Copy the current path and insert in the index into the first location
+      const changePath = Array.isArray(path) ? path.slice() : [];
+      changePath.unshift(index);
+      onChange(
         // We need to treat undefined items as nulls to have validation.
         // See https://github.com/tdegrunt/jsonschema/issues/206
-        const jsonValue = typeof value === 'undefined' ? null : value;
-        return index === i ? jsonValue : item;
-      });
-      onChange(
-        newFormData,
-        errorSchema &&
-          errorSchema && {
-            ...errorSchema,
-            [index]: newErrorSchema,
-          },
+        value === undefined ? null : value,
+        changePath,
+        newErrorSchema as ErrorSchema<T[]>,
         id,
       );
     };
@@ -419,10 +418,44 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
 
   /** Callback handler used to change the value for a checkbox */
   onSelectChange = (value: any) => {
-    const { onChange, idSchema } = this.props;
-    onChange(value, undefined, idSchema && idSchema.$id);
+    const { name, onChange, idSchema } = this.props;
+    // select change will pass the `path` array with the name
+    onChange(value, [name], undefined, idSchema && idSchema.$id);
   };
 
+  /** Helper method to compute item UI schema for both normal and fixed arrays
+   * Handles both static object and dynamic function cases
+   *
+   * @param uiSchema - The parent UI schema containing items definition
+   * @param item - The item data
+   * @param index - The index of the item
+   * @param formContext - The form context
+   * @returns The computed UI schema for the item
+   */
+  private computeItemUiSchema(
+    uiSchema: UiSchema<T[], S, F>,
+    item: T,
+    index: number,
+    formContext: F,
+  ): UiSchema<T[], S, F> | undefined {
+    if (typeof uiSchema.items === 'function') {
+      try {
+        // Call the function with item data, index, and form context
+        // TypeScript now correctly infers the types thanks to the ArrayElement type in UiSchema
+        const result = uiSchema.items(item, index, formContext);
+        // Only use the result if it's truthy
+        return result as UiSchema<T[], S, F>;
+      } catch (e) {
+        console.error(`Error executing dynamic uiSchema.items function for item at index ${index}:`, e);
+        // Fall back to undefined to allow the field to still render
+        return undefined;
+      }
+    } else {
+      // Static object case - preserve undefined to maintain backward compatibility
+      return uiSchema.items as UiSchema<T[], S, F> | undefined;
+    }
+  }
+
   /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
    */
   render() {
@@ -500,6 +533,10 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         const itemErrorSchema = errorSchema ? (errorSchema[index] as ErrorSchema<T[]>) : undefined;
         const itemIdPrefix = idSchema.$id + idSeparator + index;
         const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+
+        // Compute the item UI schema using the helper method
+        const itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
+
         return this.renderArrayFieldItem({
           key,
           index,
@@ -512,7 +549,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           itemIdSchema,
           itemErrorSchema,
           itemData: itemCast,
-          itemUiSchema: uiSchema.items,
+          itemUiSchema,
           autofocus: autofocus && index === 0,
           onBlur,
           onFocus,
@@ -751,11 +788,20 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
             : itemSchemas[index]) || {};
         const itemIdPrefix = idSchema.$id + idSeparator + index;
         const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
-        const itemUiSchema = additional
-          ? uiSchema.additionalItems || {}
-          : Array.isArray(uiSchema.items)
-            ? uiSchema.items[index]
-            : uiSchema.items || {};
+        // Compute the item UI schema - handle both static and dynamic cases
+        let itemUiSchema: UiSchema<T[], S, F> | undefined;
+        if (additional) {
+          // For additional items, use additionalItems uiSchema
+          itemUiSchema = uiSchema.additionalItems as UiSchema<T[], S, F>;
+        } else {
+          // For fixed items, uiSchema.items can be an array, a function, or a single object
+          if (Array.isArray(uiSchema.items)) {
+            itemUiSchema = uiSchema.items[index] as UiSchema<T[], S, F>;
+          } else {
+            // Use the helper method for function or static object cases
+            itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
+          }
+        }
         const itemErrorSchema = errorSchema ? (errorSchema[index] as ErrorSchema<T[]>) : undefined;
 
         return this.renderArrayFieldItem({
@@ -811,7 +857,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     canMoveDown: boolean;
     itemSchema: S;
     itemData: T[];
-    itemUiSchema: UiSchema<T[], S, F>;
+    itemUiSchema: UiSchema<T[], S, F> | undefined;
     itemIdSchema: IdSchema<T[]>;
     itemErrorSchema?: ErrorSchema<T[]>;
     autofocus?: boolean;

package/src/components/fields/BooleanField.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
   getWidget,
   getUiOptions,
@@ -5,6 +6,7 @@ import {
   FieldProps,
   FormContextType,
   EnumOptionsType,
+  ErrorSchema,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
@@ -86,6 +88,13 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       enumOptions = optionsList<T, S, F>({ enum: enums } as S, uiSchema);
     }
   }
+  const onWidgetChange = useCallback(
+    (value: T | undefined, errorSchema?: ErrorSchema, id?: string) => {
+      // Boolean field change passes an empty path array to the parent field which adds the appropriate path
+      return onChange(value, [], errorSchema, id);
+    },
+    [onChange],
+  );
 
   return (
     <Widget
@@ -94,7 +103,7 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       uiSchema={uiSchema}
       id={idSchema.$id}
       name={name}
-      onChange={onChange}
+      onChange={onWidgetChange}
       onFocus={onFocus}
       onBlur={onBlur}
       label={label}

package/src/components/fields/LayoutGridField.tsx

@@ -24,6 +24,7 @@ import {
   UI_OPTIONS_KEY,
   UI_GLOBAL_OPTIONS_KEY,
   UiSchema,
+  ITEMS_KEY,
 } from '@rjsf/utils';
 import cloneDeep from 'lodash/cloneDeep';
 import each from 'lodash/each';
@@ -39,6 +40,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
@@ -130,6 +132,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):
@@ -496,6 +507,47 @@ export default class LayoutGridField<
     return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
   }
 
+  /** Computes the `rawSchema` and `idSchema` 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 `idSchema` 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 `idSchema` is returned
+   * as is.
+   *
+   * @param schema - The schema to generate the idSchema for
+   * @param idSchema - The IdSchema for the schema
+   * @param potentialIndex - A string containing a potential index
+   * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+   * @returns - An object containing the `rawSchema` and `idSchema` of an array item, otherwise an undefined `rawSchema`
+   */
+  static computeArraySchemasIfPresent<T = any, S extends StrictRJSFSchema = RJSFSchema>(
+    schema: S | undefined,
+    idSchema: IdSchema<T>,
+    potentialIndex: string,
+    idSeparator?: string,
+  ): {
+    rawSchema?: S;
+    idSchema: IdSchema<T>;
+  } {
+    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;
+      }
+      idSchema = { [ID_KEY]: `${idSchema[ID_KEY]}${idSeparator ?? '_'}${index}` } as IdSchema<T>;
+    }
+    return { rawSchema, idSchema };
+  }
+
   /** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
    * the leaf path is found and returned (along with whether that leaf path `isRequired`) OR no schema exists for an
    * element in the path. If the leaf schema element happens to be a oneOf/anyOf then also return the oneOf/anyOf as
@@ -552,7 +604,9 @@ export default class LayoutGridField<
         rawSchema = get(selectedSchema, [PROPERTIES_KEY, part], {}) as S;
         idSchema = get(selectedIdSchema, part, {}) as IdSchema<T>;
       } else {
-        rawSchema = {} as S;
+        const result = LayoutGridField.computeArraySchemasIfPresent<T, S>(schema, idSchema, part, idSeparator);
+        rawSchema = result.rawSchema ?? ({} as S);
+        idSchema = result.idSchema;
       }
       // 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;
@@ -578,11 +632,17 @@ export default class LayoutGridField<
         idSchema = mergeObjects(rawIdSchema, idSchema) as IdSchema<T>;
       }
       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<T, S>(schema, idSchema, leafPath, idSeparator);
+      if (result.rawSchema) {
+        schema = result.rawSchema;
+        idSchema = result.idSchema;
+      } 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;
+        idSchema = get(idSchema, leafPath, {}) as IdSchema<T>;
+      }
       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;
@@ -676,16 +736,14 @@ export default class LayoutGridField<
    * @returns - The `onChange` handling function for the `dottedPath` field
    */
   onFieldChange = (dottedPath: string) => {
-    return (value: unknown, errSchema?: ErrorSchema<T>, id?: string) => {
-      const { onChange, errorSchema, formData } = this.props;
-      const newFormData = cloneDeep(formData || ({} as T));
+    return (value: T | undefined, path?: (number | string)[], errSchema?: ErrorSchema<T>, id?: string) => {
+      const { onChange, errorSchema } = this.props;
       let newErrorSchema = errorSchema;
       if (errSchema && errorSchema) {
         newErrorSchema = cloneDeep(errorSchema);
         set(newErrorSchema, dottedPath, errSchema);
       }
-      set(newFormData as object, dottedPath, value);
-      onChange(newFormData, newErrorSchema, id);
+      onChange(value, dottedPath.split('.'), newErrorSchema, id);
     };
   };
 

package/src/components/fields/LayoutMultiSchemaField.tsx

@@ -171,7 +171,8 @@ export default function LayoutMultiSchemaField<
     if (newFormData) {
       set(newFormData, selectorField, opt);
     }
-    onChange(newFormData, undefined, id);
+    // Pass the component name in the path
+    onChange(newFormData, [name], undefined, id);
   };
 
   // filtering the options based on the type of widget because `selectField` does not recognize the `convertOther` prop

package/src/components/fields/MultiSchemaField.tsx

@@ -131,7 +131,8 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     }
 
     this.setState({ selectedOption: intOption }, () => {
-      onChange(newFormData, undefined, this.getFieldId());
+      // Changing the option will pass an empty path array to the parent field which will add the appropriate path
+      onChange(newFormData, [], undefined, this.getFieldId());
     });
   };
 

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 { name, formData, onChange } = props;
   useEffect(() => {
     if (formData === undefined) {
-      onChange(null as unknown as T);
+      onChange(null as unknown as T, [name]);
     }
-  }, [formData, onChange]);
+  }, [name, formData, onChange]);
 
   return null;
 }

package/src/components/fields/NumberField.tsx

@@ -44,7 +44,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?: (number | string)[], errorSchema?: ErrorSchema<T>, id?: string) => {
       // Cache the original value in component state
       setLastValue(value);
 
@@ -62,7 +62,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],
   );