@rjsf/core 6.0.0-beta.9 → 6.0.0

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,18 +38,25 @@ import {
   ValidatorType,
   Experimental_DefaultFormStateBehavior,
   Experimental_CustomMergeAllOf,
-  createErrorHandler,
-  unwrapErrorHandler,
+  DEFAULT_ID_SEPARATOR,
+  DEFAULT_ID_PREFIX,
+  GlobalFormOptions,
+  ERRORS_KEY,
+  ID_KEY,
+  NameGeneratorFunction,
 } 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';
 
+/** Internal only symbol used by the `reset()` function to indicate that a reset operation is happening */
+const IS_RESET = Symbol('reset');
+
 /** The properties that are passed to the `Form` */
 export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
   /** The JSON schema object for the form */
@@ -57,8 +67,14 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   children?: ReactNode;
   /** The uiSchema for the form */
   uiSchema?: UiSchema<T, S, F>;
-  /** The data for the form, used to prefill a form with existing data */
+  /** The data for the form, used to load a "controlled" form with its current data. If you want an "uncontrolled" form
+   * with initial data, then use `initialFormData` instead.
+   */
   formData?: T;
+  /** The initial data for the form, used to fill an "uncontrolled" form with existing data on the initial render and
+   * when `reset()` is called programmatically.
+   */
+  initialFormData?: T;
   // Form presentation and behavior modifiers
   /** You can provide a `formContext` object to the form, which is passed down to all fields and widgets. Useful for
    * implementing context aware fields and widgets.
@@ -161,14 +177,28 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * @deprecated - In a future release, this switch may be replaced by making `validator` prop optional
    */
   noValidate?: boolean;
-  /** If set to true, the form will perform validation and show any validation errors whenever the form data is changed,
-   * rather than just on submit
+  /** Flag that describes when live validation will be performed. Live validation means that the form will perform
+   * validation and show any validation errors whenever the form data is updated, rather than just on submit.
+   *
+   * If no value (or `false`) is provided, then live validation will not happen. If `true` or `onChange` is provided for
+   * the flag, then live validation will be performed after processing of all pending changes has completed. If `onBlur`
+   * is provided, then live validation will be performed when a field that was updated is blurred (as a performance
+   * optimization).
+   *
+   * @deprecated - In a future major release, the `boolean` options for this flag will be removed
    */
-  liveValidate?: boolean;
-  /** If `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field
-   * will be removed whenever `onChange` is called. Set to `false` by default
+  liveValidate?: boolean | 'onChange' | 'onBlur';
+  /** Flag that describes when live omit will be performed. Live omit happens only when `omitExtraData` is also set to
+   * to `true` and the form's data is updated by the user.
+   *
+   * If no value (or `false`) is provided, then live omit will not happen. If `true` or `onChange` is provided for
+   * the flag, then live omit will be performed after processing of all pending changes has completed. If `onBlur`
+   * is provided, then live omit will be performed when a field that was updated is blurred (as a performance
+   * optimization).
+   *
+   * @deprecated - In a future major release, the `boolean` options for this flag will be removed
    */
-  liveOmit?: boolean;
+  liveOmit?: boolean | 'onChange' | 'onBlur';
   /** If set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is
    * called. Set to `false` by default.
    */
@@ -190,11 +220,29 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * to put the second parameter before the first in its translation.
    */
   translateString?: Registry['translateString'];
+  /** Optional function to generate custom HTML `name` attributes for form fields.
+   */
+  nameGenerator?: NameGeneratorFunction;
+  /** Optional flag that, when set to true, will cause the `FallbackField` to render a type selector for unsupported
+   * fields instead of the default UnsupportedField error UI.
+   */
+  useFallbackUiForUnsupportedType?: boolean;
   /** Optional configuration object with flags, if provided, allows users to override default form state behavior
    * Currently only affecting minItems on array fields and handling of setting defaults based on the value of
    * `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 +274,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 +288,64 @@ 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 registry (re)computed only when props changed */
+  registry: Registry<T, S, F>;
 }
 
 /** 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 Pick<
+    FormState<T, S, F>,
+    'schema' | 'uiSchema' | 'fieldPathId' | 'schemaUtils' | 'formData' | 'edit' | 'errors' | 'errorSchema'
+  > {
   /** The status of the form when submitted */
   status?: 'submitted';
 }
 
+/** Converts the full `FormState` into the `IChangeEvent` version by picking out the public values
+ *
+ * @param state - The state of the form
+ * @param status - The status provided by the onSubmit
+ * @returns - The `IChangeEvent` for the state
+ */
+function toIChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  state: FormState<T, S, F>,
+  status?: IChangeEvent['status'],
+): IChangeEvent<T, S, F> {
+  return {
+    ..._pick(state, ['schema', 'uiSchema', 'fieldPathId', 'schemaUtils', 'formData', 'edit', 'errors', 'errorSchema']),
+    ...(status !== undefined && { status }),
+  };
+}
+
+/** 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 +357,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.
@@ -284,9 +374,11 @@ export default class Form<
       throw new Error('A validator is required for Form functionality to work');
     }
 
-    this.state = this.getStateFromProps(props, props.formData);
-    if (this.props.onChange && !deepEquals(this.state.formData, this.props.formData)) {
-      this.props.onChange(this.state);
+    const { formData: propsFormData, initialFormData, onChange } = props;
+    const formData = propsFormData ?? initialFormData;
+    this.state = this.getStateFromProps(props, formData, undefined, undefined, undefined, true);
+    if (onChange && !deepEquals(this.state.formData, formData)) {
+      onChange(toIChangeEvent(this.state));
     }
     this.formElement = createRef();
   }
@@ -314,12 +406,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 +427,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 };
@@ -355,13 +455,12 @@ export default class Form<
   ) {
     if (snapshot.shouldUpdate) {
       const { nextState } = snapshot;
-
       if (
         !deepEquals(nextState.formData, this.props.formData) &&
         !deepEquals(nextState.formData, prevState.formData) &&
         this.props.onChange
       ) {
-        this.props.onChange(nextState);
+        this.props.onChange(toIChangeEvent(nextState));
       }
       this.setState(nextState);
     }
@@ -376,6 +475,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 +484,16 @@ 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 isUncontrolled = props.formData === undefined && this.props.formData === undefined;
     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 +506,37 @@ 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();
+
+    // Compute the formData for getDefaultFormState() function based on the inputFormData, isUncontrolled and state
+    let defaultsFormData = inputFormData;
+    if (inputFormData === IS_RESET) {
+      defaultsFormData = undefined;
+    } else if (inputFormData === undefined && isUncontrolled) {
+      defaultsFormData = state.formData;
+    }
+    const formData: T = schemaUtils.getDefaultFormState(
+      rootSchema,
+      defaultsFormData,
+      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 +559,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 +596,24 @@ 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,
-    );
+    // Only store a new registry when the props cause a different one to be created
+    const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
+    const registry = deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
+    // Only compute a new `fieldPathId` when the `idPrefix` is different than the existing fieldPathId's ID_KEY
+    const fieldPathId =
+      state.fieldPathId && state.fieldPathId?.[ID_KEY] === registry.globalFormOptions.idPrefix
+        ? state.fieldPathId
+        : toFieldPathId('', registry.globalFormOptions);
     const nextState: FormState<T, S, F> = {
       schemaUtils,
-      schema,
+      schema: rootSchema,
       uiSchema,
-      idSchema,
+      fieldPathId,
       formData,
       edit,
       errors,
@@ -502,6 +621,8 @@ export default class Form<
       schemaValidationErrors,
       schemaValidationErrorSchema,
       retrievedSchema: _retrievedSchema,
+      initialDefaultsGenerated: true,
+      registry,
     };
     return nextState;
   }
@@ -513,23 +634,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 +643,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 +663,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 +673,6 @@ export default class Form<
           errorSchema={errorSchema || {}}
           schema={schema}
           uiSchema={uiSchema}
-          formContext={formContext}
           registry={registry}
         />
       );
@@ -575,6 +680,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 +775,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,124 +819,143 @@ 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;
-    }
-
-    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);
-  }
+  /** Allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a
+   * `FieldPathList`. To set the root element, used either `''` or `[]` for the path. Passing undefined will clear the
+   * value in the field.
+   *
+   * @param fieldPath - Either a dotted path to the field or the `FieldPathList` to the field
+   * @param [newValue] - The new value for the field
+   */
+  setFieldValue = (fieldPath: string | FieldPathList, newValue?: T) => {
+    const { registry } = this.state;
+    const path = Array.isArray(fieldPath) ? fieldPath : fieldPath.split('.');
+    const fieldPathId = toFieldPathId('', registry.globalFormOptions, path);
+    this.onChange(newValue, path, undefined, fieldPathId[ID_KEY]);
+  };
 
-  /** 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: FieldPathList, 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) => {
+  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;
     }
 
-    const mustValidate = !noValidate && liveValidate;
+    const mustValidate = !noValidate && (liveValidate === true || liveValidate === 'onChange');
     let state: Partial<FormState<T, S, F>> = { formData, schema };
     let newFormData = formData;
 
-    if (omitExtraData === true && liveOmit === true) {
+    if (omitExtraData === true && (liveOmit === true || liveOmit === 'onChange')) {
       newFormData = this.omitExtraData(formData);
       state = {
         formData: newFormData,
       };
     }
 
-    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) {
+          const errors = _get(newErrorSchema, ERRORS_KEY);
+          if (errors) {
+            // only set errors when there are some
+            customErrors.setErrors(errors);
+          }
+        } 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(toIChangeEvent({ ...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.
@@ -782,8 +978,16 @@ export default class Form<
    *
    */
   reset = () => {
-    const { onChange } = this.props;
-    const newState = this.getStateFromProps(this.props, undefined);
+    // Cast the IS_RESET symbol to T to avoid type issues, we use this symbol to detect reset mode
+    const { formData: propsFormData, initialFormData = IS_RESET as T, onChange } = this.props;
+    const newState = this.getStateFromProps(
+      this.props,
+      propsFormData ?? initialFormData,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
     const newFormData = newState.formData;
     const state = {
       formData: newFormData,
@@ -791,22 +995,61 @@ 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 }));
+    this.setState(state, () => onChange && onChange(toIChangeEvent({ ...this.state, ...state })));
   };
 
   /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-   * was provided.
+   * was provided. Also runs any live validation and/or live omit operations if the flags indicate they should happen
+   * during `onBlur`.
    *
    * @param id - The unique `id` of the field that was blurred
    * @param data - The data associated with the field that was blurred
    */
   onBlur = (id: string, data: any) => {
-    const { onBlur } = this.props;
+    const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
     if (onBlur) {
       onBlur(id, data);
     }
+    if ((omitExtraData === true && liveOmit === 'onBlur') || liveValidate === 'onBlur') {
+      const { onChange, extraErrors } = this.props;
+      const { formData } = this.state;
+      let newFormData: T | undefined = formData;
+      let state: Partial<FormState<T, S, F>> = { formData: newFormData };
+      if (omitExtraData === true && liveOmit === 'onBlur') {
+        newFormData = this.omitExtraData(formData);
+        state = { formData: newFormData };
+      }
+      if (liveValidate === 'onBlur') {
+        const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
+        const liveValidation = this.liveValidate(
+          schema,
+          schemaUtils,
+          errorSchema,
+          newFormData,
+          extraErrors,
+          customErrors,
+          retrievedSchema,
+        );
+        state = { formData: newFormData, ...liveValidation, customErrors };
+      }
+      const hasChanges = Object.keys(state)
+        // Filter out `schemaValidationErrors` and `schemaValidationErrorSchema` since they aren't IChangeEvent props
+        .filter((key) => !key.startsWith('schemaValidation'))
+        .some((key) => {
+          const oldData = _get(this.state, key);
+          const newData = _get(state, key);
+          return !deepEquals(oldData, newData);
+        });
+      this.setState(state as FormState<T, S, F>, () => {
+        if (onChange && hasChanges) {
+          onChange(toIChangeEvent({ ...this.state, ...state }), id);
+        }
+      });
+    }
   };
 
   /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
@@ -859,34 +1102,60 @@ export default class Form<
         },
         () => {
           if (onSubmit) {
-            onSubmit({ ...this.state, formData: newFormData, status: 'submitted' }, event);
+            onSubmit(toIChangeEvent({ ...this.state, formData: newFormData }, 'submitted'), event);
           }
         },
       );
     }
   };
 
-  /** Returns the registry for the form */
-  getRegistry(): Registry<T, S, F> {
-    const { translateString: customTranslateString, uiSchema = {} } = this.props;
-    const { schemaUtils } = this.state;
+  /** 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,
+      nameGenerator,
+      useFallbackUiForUnsupportedType = false,
+    } = props;
+    const rootFieldId = uiSchema['ui:rootFieldId'];
+    // Omit any options that are undefined or null
+    return {
+      idPrefix: rootFieldId || idPrefix,
+      idSeparator,
+      useFallbackUiForUnsupportedType,
+      ...(experimental_componentUpdateStrategy !== undefined && { experimental_componentUpdateStrategy }),
+      ...(nameGenerator !== undefined && { nameGenerator }),
+    };
+  }
+
+  /** Computed the registry for the form using the given `props`, `schema` and `schemaUtils` */
+  getRegistry(props: FormProps<T, S, F>, schema: S, schemaUtils: SchemaUtilsType<T, S, F>): Registry<T, S, F> {
+    const { translateString: customTranslateString, uiSchema = {} } = props;
     const { fields, templates, widgets, formContext, translateString } = getDefaultRegistry<T, S, F>();
     return {
-      fields: { ...fields, ...this.props.fields },
+      fields: { ...fields, ...props.fields },
       templates: {
         ...templates,
-        ...this.props.templates,
+        ...props.templates,
         ButtonTemplates: {
           ...templates.ButtonTemplates,
-          ...this.props.templates?.ButtonTemplates,
+          ...props.templates?.ButtonTemplates,
         },
       },
-      widgets: { ...widgets, ...this.props.widgets },
-      rootSchema: this.props.schema,
-      formContext: this.props.formContext || formContext,
+      widgets: { ...widgets, ...props.widgets },
+      rootSchema: schema,
+      formContext: props.formContext || formContext,
       schemaUtils,
       translateString: customTranslateString || translateString,
       globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY],
+      globalFormOptions: this.getGlobalFormOptions(props),
     };
   }
 
@@ -1011,8 +1280,6 @@ export default class Form<
     const {
       children,
       id,
-      idPrefix,
-      idSeparator,
       className = '',
       tagName,
       name,
@@ -1025,13 +1292,11 @@ export default class Form<
       noHtml5Validate = false,
       disabled,
       readonly,
-      formContext,
       showErrorList = 'top',
       _internalFormWrapper,
     } = this.props;
 
-    const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
-    const registry = this.getRegistry();
+    const { schema, uiSchema, formData, errorSchema, fieldPathId, registry } = this.state;
     const { SchemaField: _SchemaField } = registry.fields;
     const { SubmitButton } = registry.templates.ButtonTemplates;
     // The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
@@ -1068,10 +1333,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}