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

package/src/components/Form.tsx

@@ -4,13 +4,15 @@ import {
   CustomValidator,
   deepEquals,
   ErrorSchema,
+  ErrorSchemaBuilder,
   ErrorTransformer,
+  FieldPathId,
+  FieldPathList,
   FormContextType,
   GenericObjectType,
   getChangedFields,
   getTemplate,
   getUiOptions,
-  IdSchema,
   isObject,
   mergeObjects,
   NAME_KEY,
@@ -27,6 +29,7 @@ import {
   SUBMIT_BTN_OPTIONS_KEY,
   TemplatesType,
   toErrorList,
+  toFieldPathId,
   UiSchema,
   UI_GLOBAL_OPTIONS_KEY,
   UI_OPTIONS_KEY,
@@ -35,14 +38,16 @@ import {
   ValidatorType,
   Experimental_DefaultFormStateBehavior,
   Experimental_CustomMergeAllOf,
-  createErrorHandler,
-  unwrapErrorHandler,
+  DEFAULT_ID_SEPARATOR,
+  DEFAULT_ID_PREFIX,
+  GlobalFormOptions,
+  ERRORS_KEY,
 } from '@rjsf/utils';
-import _forEach from 'lodash/forEach';
+import _cloneDeep from 'lodash/cloneDeep';
 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';
@@ -195,6 +200,17 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * `emptyObjectFields`
    */
   experimental_defaultFormStateBehavior?: Experimental_DefaultFormStateBehavior;
+  /**
+   * Controls the component update strategy used by the Form's `shouldComponentUpdate` lifecycle method.
+   *
+   * - `'customDeep'`: Uses RJSF's custom deep equality checks via the `deepEquals` utility function,
+   *   which treats all functions as equivalent and provides optimized performance for form data comparisons.
+   * - `'shallow'`: Uses shallow comparison of props and state (only compares direct properties). This matches React's PureComponent behavior.
+   * - `'always'`: Always rerenders when called. This matches React's Component behavior.
+   *
+   * @default 'customDeep'
+   */
+  experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';
   /** Optional function that allows for custom merging of `allOf` schemas
    */
   experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>;
@@ -226,10 +242,10 @@ export interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   schema: S;
   /** The uiSchema for the form */
   uiSchema: UiSchema<T, S, F>;
-  /** The `IdSchema` for the form, computed from the `schema`, the `rootFieldId`, the `formData` and the `idPrefix` and
+  /** The `FieldPathId` for the form, computed from the `schema`, the `rootFieldId`, the `idPrefix` and
    * `idSeparator` props.
    */
-  idSchema: IdSchema<T>;
+  fieldPathId: FieldPathId;
   /** The schemaUtils implementation used by the `Form`, created from the `validator` and the `schema` */
   schemaUtils: SchemaUtilsType<T, S, F>;
   /** The current data for the form, computed from the `formData` prop and the changes made by the user */
@@ -240,26 +256,50 @@ export interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   errors: RJSFValidationError[];
   /** The current errors, in `ErrorSchema` format, for the form, includes `extraErrors` */
   errorSchema: ErrorSchema<T>;
+  // Private
   /** The current list of errors for the form directly from schema validation, does NOT include `extraErrors` */
   schemaValidationErrors: RJSFValidationError[];
   /** The current errors, in `ErrorSchema` format, for the form directly from schema validation, does NOT include
    * `extraErrors`
    */
   schemaValidationErrorSchema: ErrorSchema<T>;
-  // Private
+  /** A container used to handle custom errors provided via `onChange` */
+  customErrors?: ErrorSchemaBuilder<T>;
   /** @description result of schemaUtils.retrieveSchema(schema, formData). This a memoized value to avoid re calculate at internal functions (getStateFromProps, onChange) */
   retrievedSchema: S;
+  /** Flag indicating whether the initial form defaults have been generated */
+  initialDefaultsGenerated: boolean;
 }
 
 /** The event data passed when changes have been made to the form, includes everything from the `FormState` except
  * the schema validation errors. An additional `status` is added when returned from `onSubmit`
  */
 export interface IChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>
-  extends Omit<FormState<T, S, F>, 'schemaValidationErrors' | 'schemaValidationErrorSchema'> {
+  extends Omit<
+    FormState<T, S, F>,
+    | 'schemaValidationErrors'
+    | 'schemaValidationErrorSchema'
+    | 'retrievedSchema'
+    | 'customErrors'
+    | 'initialDefaultsGenerated'
+  > {
   /** The status of the form when submitted */
   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: FieldPathList;
+  /** 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,
@@ -271,6 +311,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.
@@ -314,12 +358,18 @@ export default class Form<
     prevState: FormState<T, S, F>,
   ): { nextState: FormState<T, S, F>; shouldUpdate: true } | { shouldUpdate: false } {
     if (!deepEquals(this.props, prevProps)) {
+      // Compare the previous props formData against the current props formData
       const formDataChangedFields = getChangedFields(this.props.formData, prevProps.formData);
+      // Compare the current props formData against the current state's formData to determine if the new props were the
+      // result of the onChange from the existing state formData
+      const stateDataChangedFields = getChangedFields(this.props.formData, this.state.formData);
       const isSchemaChanged = !deepEquals(prevProps.schema, this.props.schema);
       // When formData is not an object, getChangedFields returns an empty array.
       // In this case, deepEquals is most needed to check again.
       const isFormDataChanged =
         formDataChangedFields.length > 0 || !deepEquals(prevProps.formData, this.props.formData);
+      const isStateDataChanged =
+        stateDataChangedFields.length > 0 || !deepEquals(this.state.formData, this.props.formData);
       const nextState = this.getStateFromProps(
         this.props,
         this.props.formData,
@@ -329,6 +379,8 @@ export default class Form<
         isSchemaChanged || isFormDataChanged ? undefined : this.state.retrievedSchema,
         isSchemaChanged,
         formDataChangedFields,
+        // Skip live validation for this request if no form data has changed from the last state
+        !isStateDataChanged,
       );
       const shouldUpdate = !deepEquals(nextState, prevState);
       return { nextState, shouldUpdate };
@@ -376,6 +428,7 @@ export default class Form<
    * @param retrievedSchema - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`.
    * @param isSchemaChanged - A flag indicating whether the schema has changed.
    * @param formDataChangedFields - The changed fields of `formData`
+   * @param skipLiveValidate - Optional flag, if true, means that we are not running live validation
    * @returns - The new state for the `Form`
    */
   getStateFromProps(
@@ -384,14 +437,15 @@ export default class Form<
     retrievedSchema?: S,
     isSchemaChanged = false,
     formDataChangedFields: string[] = [],
+    skipLiveValidate = false,
   ): FormState<T, S, F> {
     const state: FormState<T, S, F> = this.state || {};
     const schema = 'schema' in props ? props.schema : this.props.schema;
+    const validator = 'validator' in props ? props.validator : this.props.validator;
     const uiSchema: UiSchema<T, S, F> = ('uiSchema' in props ? props.uiSchema! : this.props.uiSchema!) || {};
     const edit = typeof inputFormData !== 'undefined';
     const liveValidate = 'liveValidate' in props ? props.liveValidate : this.props.liveValidate;
     const mustValidate = edit && !props.noValidate && liveValidate;
-    const rootSchema = schema;
     const experimental_defaultFormStateBehavior =
       'experimental_defaultFormStateBehavior' in props
         ? props.experimental_defaultFormStateBehavior
@@ -404,22 +458,29 @@ export default class Form<
     if (
       !schemaUtils ||
       schemaUtils.doesSchemaUtilsDiffer(
-        props.validator,
-        rootSchema,
+        validator,
+        schema,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf,
       )
     ) {
       schemaUtils = createSchemaUtils<T, S, F>(
-        props.validator,
-        rootSchema,
+        validator,
+        schema,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf,
       );
     }
-    const formData: T = schemaUtils.getDefaultFormState(schema, inputFormData) as T;
+
+    const rootSchema = schemaUtils.getRootSchema();
+    const formData: T = schemaUtils.getDefaultFormState(
+      rootSchema,
+      inputFormData,
+      false,
+      state.initialDefaultsGenerated,
+    ) as T;
     const _retrievedSchema = this.updateRetrievedSchema(
-      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData),
+      retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData),
     );
 
     const getCurrentErrors = (): ValidationData<T> => {
@@ -442,27 +503,30 @@ export default class Form<
     let errorSchema: ErrorSchema<T> | undefined;
     let schemaValidationErrors: RJSFValidationError[] = state.schemaValidationErrors;
     let schemaValidationErrorSchema: ErrorSchema<T> = state.schemaValidationErrorSchema;
-    if (mustValidate) {
-      const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
-      errors = schemaValidation.errors;
-      // If retrievedSchema is undefined which means the schema or formData has changed, we do not merge state.
-      // Else in the case where it hasn't changed, we merge 'state.errorSchema' with 'schemaValidation.errorSchema.' This done to display the raised field error.
-      if (retrievedSchema === undefined) {
-        errorSchema = schemaValidation.errorSchema;
-      } else {
-        errorSchema = mergeObjects(
-          this.state?.errorSchema,
-          schemaValidation.errorSchema,
-          'preventDuplicates',
-        ) as ErrorSchema<T>;
-      }
-      schemaValidationErrors = errors;
-      schemaValidationErrorSchema = errorSchema;
+    // If we are skipping live validate, it means that the state has already been updated with live validation errors
+    if (mustValidate && !skipLiveValidate) {
+      const liveValidation = this.liveValidate(
+        rootSchema,
+        schemaUtils,
+        state.errorSchema,
+        formData,
+        undefined,
+        state.customErrors,
+        retrievedSchema,
+        // If retrievedSchema is undefined which means the schema or formData has changed, we do not merge state.
+        // Else in the case where it hasn't changed,
+        retrievedSchema !== undefined,
+      );
+      errors = liveValidation.errors;
+      errorSchema = liveValidation.errorSchema;
+      schemaValidationErrors = liveValidation.schemaValidationErrors;
+      schemaValidationErrorSchema = liveValidation.schemaValidationErrorSchema;
     } else {
       const currentErrors = getCurrentErrors();
       errors = currentErrors.errors;
       errorSchema = currentErrors.errorSchema;
-      if (formDataChangedFields.length > 0) {
+      // We only update the error schema for changed fields if mustValidate is false
+      if (formDataChangedFields.length > 0 && !mustValidate) {
         const newErrorSchema = formDataChangedFields.reduce(
           (acc, key) => {
             acc[key] = undefined;
@@ -476,25 +540,17 @@ export default class Form<
           'preventDuplicates',
         ) as ErrorSchema<T>;
       }
+      const mergedErrors = this.mergeErrors({ errorSchema, errors }, props.extraErrors, state.customErrors);
+      errors = mergedErrors.errors;
+      errorSchema = mergedErrors.errorSchema;
     }
 
-    if (props.extraErrors) {
-      const merged = validationDataMerge({ errorSchema, errors }, props.extraErrors);
-      errorSchema = merged.errorSchema;
-      errors = merged.errors;
-    }
-    const idSchema = schemaUtils.toIdSchema(
-      _retrievedSchema,
-      uiSchema['ui:rootFieldId'],
-      formData,
-      props.idPrefix,
-      props.idSeparator,
-    );
+    const fieldPathId = toFieldPathId('', this.getGlobalFormOptions(this.props));
     const nextState: FormState<T, S, F> = {
       schemaUtils,
-      schema,
+      schema: rootSchema,
       uiSchema,
-      idSchema,
+      fieldPathId,
       formData,
       edit,
       errors,
@@ -502,6 +558,7 @@ export default class Form<
       schemaValidationErrors,
       schemaValidationErrorSchema,
       retrievedSchema: _retrievedSchema,
+      initialDefaultsGenerated: true,
     };
     return nextState;
   }
@@ -513,23 +570,8 @@ export default class Form<
    * @returns - True if the component should be updated, false otherwise
    */
   shouldComponentUpdate(nextProps: FormProps<T, S, F>, nextState: FormState<T, S, F>): boolean {
-    return shouldRender(this, nextProps, nextState);
-  }
-
-  /** Gets the previously raised customValidate errors.
-   *
-   * @returns the previous customValidate errors
-   */
-  private getPreviousCustomValidateErrors(): ErrorSchema<T> {
-    const { customValidate, uiSchema } = this.props;
-    const prevFormData = this.state.formData as T;
-    let customValidateErrors = {};
-    if (typeof customValidate === 'function') {
-      const errorHandler = customValidate(prevFormData, createErrorHandler<T>(prevFormData), uiSchema);
-      const userErrorSchema = unwrapErrorHandler<T>(errorHandler);
-      customValidateErrors = userErrorSchema;
-    }
-    return customValidateErrors;
+    const { experimental_componentUpdateStrategy = 'customDeep' } = this.props;
+    return shouldRender(this, nextProps, nextState, experimental_componentUpdateStrategy);
   }
 
   /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
@@ -537,11 +579,12 @@ 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,
-    schema = this.props.schema,
+    schema = this.state.schema,
     altSchemaUtils?: SchemaUtilsType<T, S, F>,
     retrievedSchema?: S,
   ): ValidationData<T> {
@@ -556,7 +599,6 @@ export default class Form<
   /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
   renderErrors(registry: Registry<T, S, F>) {
     const { errors, errorSchema, schema, uiSchema } = this.state;
-    const { formContext } = this.props;
     const options = getUiOptions<T, S, F>(uiSchema);
     const ErrorListTemplate = getTemplate<'ErrorListTemplate', T, S, F>('ErrorListTemplate', registry, options);
 
@@ -567,7 +609,6 @@ export default class Form<
           errorSchema={errorSchema || {}}
           schema={schema}
           uiSchema={uiSchema}
-          formContext={formContext}
           registry={registry}
         />
       );
@@ -575,6 +616,75 @@ export default class Form<
     return null;
   }
 
+  /** Merges any `extraErrors` or `customErrors` into the given `schemaValidation` object, returning the result
+   *
+   * @param schemaValidation - The `ValidationData` object into which additional errors are merged
+   * @param [extraErrors] - The extra errors from the props
+   * @param [customErrors] - The customErrors from custom components
+   * @return - The `extraErrors` and `customErrors` merged into the `schemaValidation`
+   * @private
+   */
+  private mergeErrors(
+    schemaValidation: ValidationData<T>,
+    extraErrors?: FormProps['extraErrors'],
+    customErrors?: ErrorSchemaBuilder,
+  ): ValidationData<T> {
+    let errorSchema: ErrorSchema<T> = schemaValidation.errorSchema;
+    let errors: RJSFValidationError[] = schemaValidation.errors;
+    if (extraErrors) {
+      const merged = validationDataMerge(schemaValidation, extraErrors);
+      errorSchema = merged.errorSchema;
+      errors = merged.errors;
+    }
+    if (customErrors) {
+      const merged = validationDataMerge(schemaValidation, customErrors.ErrorSchema, true);
+      errorSchema = merged.errorSchema;
+      errors = merged.errors;
+    }
+    return { errors, errorSchema };
+  }
+
+  /** Performs live validation and then updates and returns the errors and error schemas by potentially merging in
+   * `extraErrors` and `customErrors`.
+   *
+   * @param rootSchema - The `rootSchema` from the state
+   * @param schemaUtils - The `SchemaUtilsType` from the state
+   * @param originalErrorSchema - The original `ErrorSchema` from the state
+   * @param [formData] - The new form data to validate
+   * @param [extraErrors] - The extra errors from the props
+   * @param [customErrors] - The customErrors from custom components
+   * @param [retrievedSchema] - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`
+   * @param [mergeIntoOriginalErrorSchema=false] - Optional flag indicating whether we merge into original schema
+   * @returns - An object containing `errorSchema`, `errors`, `schemaValidationErrors` and `schemaValidationErrorSchema`
+   * @private
+   */
+  private liveValidate(
+    rootSchema: S,
+    schemaUtils: SchemaUtilsType<T, S, F>,
+    originalErrorSchema: ErrorSchema<S>,
+    formData?: T,
+    extraErrors?: FormProps['extraErrors'],
+    customErrors?: ErrorSchemaBuilder<T>,
+    retrievedSchema?: S,
+    mergeIntoOriginalErrorSchema = false,
+  ) {
+    const schemaValidation = this.validate(formData, rootSchema, schemaUtils, retrievedSchema);
+    const errors = schemaValidation.errors;
+    let errorSchema = schemaValidation.errorSchema;
+    // We merge 'originalErrorSchema' with 'schemaValidation.errorSchema.'; This done to display the raised field error.
+    if (mergeIntoOriginalErrorSchema) {
+      errorSchema = mergeObjects(
+        originalErrorSchema,
+        schemaValidation.errorSchema,
+        'preventDuplicates',
+      ) as ErrorSchema<T>;
+    }
+    const schemaValidationErrors = errors;
+    const schemaValidationErrorSchema = errorSchema;
+    const mergedErrors = this.mergeErrors({ errorSchema, errors }, extraErrors, customErrors);
+    return { ...mergedErrors, schemaValidationErrors, schemaValidationErrorSchema };
+  }
+
   /** Returns the `formData` with only the elements specified in the `fields` list
    *
    * @param formData - The data for the `Form`
@@ -601,25 +711,28 @@ export default class Form<
    * @param [formData] - The form data to use while checking for empty objects/arrays
    */
   getFieldNames = (pathSchema: PathSchema<T>, formData?: T): string[][] => {
+    const formValueHasData = (value: T, isLeaf: boolean) =>
+      typeof value !== 'object' || _isEmpty(value) || (isLeaf && !_isEmpty(value));
     const getAllPaths = (_obj: GenericObjectType, acc: string[][] = [], paths: string[][] = [[]]) => {
-      Object.keys(_obj).forEach((key: string) => {
-        if (typeof _obj[key] === 'object') {
+      const objKeys = Object.keys(_obj);
+      objKeys.forEach((key: string) => {
+        const data = _obj[key];
+        if (typeof data === 'object') {
           const newPaths = paths.map((path) => [...path, key]);
           // If an object is marked with additionalProperties, all its keys are valid
-          if (_obj[key][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== '') {
-            acc.push(_obj[key][NAME_KEY]);
+          if (data[RJSF_ADDITIONAL_PROPERTIES_FLAG] && data[NAME_KEY] !== '') {
+            acc.push(data[NAME_KEY]);
           } else {
-            getAllPaths(_obj[key], acc, newPaths);
+            getAllPaths(data, acc, newPaths);
           }
-        } else if (key === NAME_KEY && _obj[key] !== '') {
+        } else if (key === NAME_KEY && data !== '') {
           paths.forEach((path) => {
             const formValue = _get(formData, path);
-            // adds path to fieldNames if it points to a value
-            // or an empty object/array
+            const isLeaf = objKeys.length === 1;
+            // adds path to fieldNames if it points to a value or an empty object/array which is not a leaf
             if (
-              typeof formValue !== 'object' ||
-              _isEmpty(formValue) ||
-              (Array.isArray(formValue) && formValue.every((val) => typeof val !== 'object'))
+              formValueHasData(formValue, isLeaf) ||
+              (Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf)))
             ) {
               acc.push(path);
             }
@@ -642,74 +755,54 @@ 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.
-  private filterErrorsBasedOnSchema(schemaErrors: ErrorSchema<T>, resolvedSchema?: S, formData?: any): ErrorSchema<T> {
-    const { retrievedSchema, schemaUtils } = this.state;
-    const _retrievedSchema = resolvedSchema ?? retrievedSchema;
-    const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, '', formData);
-    const fieldNames = this.getFieldNames(pathSchema, formData);
-    const filteredErrors: ErrorSchema<T> = _pick(schemaErrors, fieldNames as unknown as string[]);
-    // If the root schema is of a primitive type, do not filter out the __errors
-    if (resolvedSchema?.type !== 'object' && resolvedSchema?.type !== 'array') {
-      filteredErrors.__errors = schemaErrors.__errors;
+  /** Pushes the given change information into the `pendingChanges` array and then calls `processPendingChanges()` if
+   * the array only contains a single pending 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: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+    this.pendingChanges.push({ newValue, path, newErrorSchema, id });
+    if (this.pendingChanges.length === 1) {
+      this.processPendingChange();
     }
+  };
 
-    const prevCustomValidateErrors = this.getPreviousCustomValidateErrors();
-    // Filtering out the previous raised customValidate errors so that they are cleared when no longer valid.
-    const filterPreviousCustomErrors = (errors: string[] = [], prevCustomErrors: string[]) => {
-      if (errors.length === 0) {
-        return errors;
-      }
-
-      return errors.filter((error) => {
-        return !prevCustomErrors.includes(error);
-      });
-    };
-
-    // Removing undefined, null and empty errors.
-    const filterNilOrEmptyErrors = (errors: any, previousCustomValidateErrors: any = {}): ErrorSchema<T> => {
-      _forEach(errors, (errorAtKey: ErrorSchema<T>['__errors'] | undefined, errorKey: keyof typeof errors) => {
-        const prevCustomValidateErrorAtKey: ErrorSchema<T> | undefined = previousCustomValidateErrors[errorKey];
-        if (_isNil(errorAtKey) || (Array.isArray(errorAtKey) && errorAtKey.length === 0)) {
-          delete errors[errorKey];
-        } else if (
-          isObject(errorAtKey) &&
-          isObject(prevCustomValidateErrorAtKey) &&
-          Array.isArray(prevCustomValidateErrorAtKey?.__errors)
-        ) {
-          // if previous customValidate error is an object and has __errors array, filter out the errors previous customValidate errors.
-          errors[errorKey] = filterPreviousCustomErrors(errorAtKey.__errors, prevCustomValidateErrorAtKey.__errors);
-        } else if (typeof errorAtKey === 'object' && !Array.isArray(errorAtKey.__errors)) {
-          filterNilOrEmptyErrors(errorAtKey, previousCustomValidateErrors[errorKey]);
-        }
-      });
-      return errors;
-    };
-    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.
-   *
-   * @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
+  /** 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) => {
+  processPendingChange() {
+    if (this.pendingChanges.length === 0) {
+      return;
+    }
+    const { newValue, path, id } = this.pendingChanges[0];
+    const { newErrorSchema } = this.pendingChanges[0];
     const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-    const { schemaUtils, schema } = this.state;
+    const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
+    let { customErrors, errorSchema: originalErrorSchema } = this.state;
+    const rootPathId = fieldPathId.path[0] || '';
 
+    const isRootPath = !path || path.length === 0 || (path.length === 1 && path[0] === rootPathId);
     let retrievedSchema = this.state.retrievedSchema;
+    let formData = isRootPath ? newValue : _cloneDeep(oldFormData);
     if (isObject(formData) || Array.isArray(formData)) {
-      const newState = this.getStateFromProps(this.props, formData);
+      if (!isRootPath) {
+        // If the newValue is not on the root path, then set it into the form data
+        _set(formData, path, newValue);
+      }
+      // Pass true to skip live validation in `getStateFromProps()` since we will do it a bit later
+      const newState = this.getStateFromProps(this.props, formData, undefined, undefined, undefined, true);
       formData = newState.formData;
       retrievedSchema = newState.retrievedSchema;
     }
@@ -725,41 +818,62 @@ export default class Form<
       };
     }
 
-    if (mustValidate) {
-      const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
-      let errors = schemaValidation.errors;
-      let errorSchema = schemaValidation.errorSchema;
-      const schemaValidationErrors = errors;
-      const schemaValidationErrorSchema = errorSchema;
-      if (extraErrors) {
-        const merged = validationDataMerge(schemaValidation, extraErrors);
-        errorSchema = merged.errorSchema;
-        errors = merged.errors;
-      }
-      // Merging 'newErrorSchema' into 'errorSchema' to display the custom raised errors.
-      if (newErrorSchema) {
-        const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-        errorSchema = mergeObjects(errorSchema, filteredErrors, 'preventDuplicates') as ErrorSchema<T>;
+    if (newErrorSchema) {
+      // First check to see if there is an existing validation error on this path...
+      // @ts-expect-error TS2590, because getting from the error schema is confusing TS
+      const oldValidationError = !isRootPath ? _get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
+      // If there is an old validation error for this path, assume we are updating it directly
+      if (!_isEmpty(oldValidationError)) {
+        // Update the originalErrorSchema "in place" or replace it if it is the root
+        if (!isRootPath) {
+          _set(originalErrorSchema, path, newErrorSchema);
+        } else {
+          originalErrorSchema = newErrorSchema;
+        }
+      } else {
+        if (!customErrors) {
+          customErrors = new ErrorSchemaBuilder<T>();
+        }
+        if (isRootPath) {
+          customErrors.setErrors(_get(newErrorSchema, ERRORS_KEY, ''));
+        } else {
+          _set(customErrors.ErrorSchema, path, newErrorSchema);
+        }
       }
-      state = {
-        formData: newFormData,
-        errors,
-        errorSchema,
-        schemaValidationErrors,
-        schemaValidationErrorSchema,
-      };
+    } else if (customErrors && _get(customErrors.ErrorSchema, [...path, ERRORS_KEY])) {
+      // If we have custom errors and the path has an error, then we need to clear it
+      customErrors.clearErrors(path);
+    }
+    // If there are pending changes in the queue, skip live validation since it will happen with the last change
+    if (mustValidate && this.pendingChanges.length === 1) {
+      const liveValidation = this.liveValidate(
+        schema,
+        schemaUtils,
+        originalErrorSchema,
+        newFormData,
+        extraErrors,
+        customErrors,
+        retrievedSchema,
+      );
+      state = { formData: newFormData, ...liveValidation, customErrors };
     } else if (!noValidate && newErrorSchema) {
-      const errorSchema = extraErrors
-        ? (mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates') as ErrorSchema<T>)
-        : newErrorSchema;
+      // Merging 'newErrorSchema' into 'errorSchema' to display the custom raised errors.
+      const mergedErrors = this.mergeErrors({ errorSchema: originalErrorSchema, errors }, extraErrors, customErrors);
       state = {
         formData: newFormData,
-        errorSchema: errorSchema,
-        errors: toErrorList(errorSchema),
+        ...mergedErrors,
+        customErrors,
       };
     }
-    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.
@@ -791,6 +905,8 @@ export default class Form<
       errors: [] as unknown,
       schemaValidationErrors: [] as unknown,
       schemaValidationErrorSchema: {},
+      initialDefaultsGenerated: false,
+      customErrors: undefined,
     } as FormState<T, S, F>;
 
     this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
@@ -866,10 +982,28 @@ export default class Form<
     }
   };
 
+  /** Extracts the `GlobalFormOptions` from the given Form `props`
+   *
+   * @param props - The form props to extract the global form options from
+   * @returns - The `GlobalFormOptions` from the props
+   * @private
+   */
+  private getGlobalFormOptions(props: FormProps<T, S, F>): GlobalFormOptions {
+    const {
+      uiSchema = {},
+      experimental_componentUpdateStrategy,
+      idSeparator = DEFAULT_ID_SEPARATOR,
+      idPrefix = DEFAULT_ID_PREFIX,
+    } = props;
+    const rootFieldId = uiSchema['ui:rootFieldId'];
+    // Omit any options that are undefined or null
+    return { idPrefix: rootFieldId || idPrefix, idSeparator, experimental_componentUpdateStrategy };
+  }
+
   /** Returns the registry for the form */
   getRegistry(): Registry<T, S, F> {
     const { translateString: customTranslateString, uiSchema = {} } = this.props;
-    const { schemaUtils } = this.state;
+    const { schema, schemaUtils } = this.state;
     const { fields, templates, widgets, formContext, translateString } = getDefaultRegistry<T, S, F>();
     return {
       fields: { ...fields, ...this.props.fields },
@@ -882,11 +1016,12 @@ export default class Form<
         },
       },
       widgets: { ...widgets, ...this.props.widgets },
-      rootSchema: this.props.schema,
+      rootSchema: schema,
       formContext: this.props.formContext || formContext,
       schemaUtils,
       translateString: customTranslateString || translateString,
       globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY],
+      globalFormOptions: this.getGlobalFormOptions(this.props),
     };
   }
 
@@ -1011,8 +1146,6 @@ export default class Form<
     const {
       children,
       id,
-      idPrefix,
-      idSeparator,
       className = '',
       tagName,
       name,
@@ -1025,12 +1158,11 @@ export default class Form<
       noHtml5Validate = false,
       disabled,
       readonly,
-      formContext,
       showErrorList = 'top',
       _internalFormWrapper,
     } = this.props;
 
-    const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
+    const { schema, uiSchema, formData, errorSchema, fieldPathId } = this.state;
     const registry = this.getRegistry();
     const { SchemaField: _SchemaField } = registry.fields;
     const { SubmitButton } = registry.templates.ButtonTemplates;
@@ -1068,10 +1200,7 @@ export default class Form<
           schema={schema}
           uiSchema={uiSchema}
           errorSchema={errorSchema}
-          idSchema={idSchema}
-          idPrefix={idPrefix}
-          idSeparator={idSeparator}
-          formContext={formContext}
+          fieldPathId={fieldPathId}
           formData={formData}
           onChange={this.onChange}
           onBlur={this.onBlur}