@rjsf/core 6.3.1 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "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",
@@ -76,9 +76,9 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rjsf/snapshot-tests": "6.3.1",
-    "@rjsf/utils": "6.3.1",
-    "@rjsf/validator-ajv8": "6.3.1",
+    "@rjsf/snapshot-tests": "6.4.0",
+    "@rjsf/utils": "6.4.0",
+    "@rjsf/validator-ajv8": "6.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/src/components/Form.tsx

@@ -308,6 +308,8 @@ export interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   initialDefaultsGenerated: boolean;
   /** The registry (re)computed only when props changed */
   registry: Registry<T, S, F>;
+  /** Tracks the previous `extraErrors` prop reference so that `getDerivedStateFromProps` can detect changes */
+  _prevExtraErrors?: ErrorSchema<T>;
 }
 
 /** The event data passed when changes have been made to the form, includes everything from the `FormState` except
@@ -374,6 +376,38 @@ export default class Form<
    */
   private _isProcessingUserChange = false;
 
+  /** When the `extraErrors` prop changes, re-merges `schemaValidationErrors` + `extraErrors` + `customErrors` into
+   * state before render, ensuring the updated errors are visible immediately in a single render cycle.
+   *
+   * @param props - The current props
+   * @param state - The current state
+   * @returns Partial state with re-merged errors if `extraErrors` changed, or `null` if no update is needed
+   */
+  static getDerivedStateFromProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+    props: FormProps<T, S, F>,
+    state: FormState<T, S, F>,
+  ): Partial<FormState<T, S, F>> | null {
+    if (props.extraErrors !== state._prevExtraErrors) {
+      const baseErrors: ValidationData<T> = {
+        errors: state.schemaValidationErrors || [],
+        errorSchema: (state.schemaValidationErrorSchema || {}) as ErrorSchema<T>,
+      };
+      let { errors, errorSchema } = baseErrors;
+      if (props.extraErrors) {
+        ({ errors, errorSchema } = validationDataMerge<T>(baseErrors, props.extraErrors));
+      }
+      if (state.customErrors) {
+        ({ errors, errorSchema } = validationDataMerge<T>(
+          { errors, errorSchema },
+          state.customErrors.ErrorSchema,
+          true,
+        ));
+      }
+      return { _prevExtraErrors: props.extraErrors, errors, errorSchema };
+    }
+    return null;
+  }
+
   /** 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.
@@ -389,7 +423,10 @@ export default class Form<
 
     const { formData: propsFormData, initialFormData, onChange } = props;
     const formData = propsFormData ?? initialFormData;
-    this.state = this.getStateFromProps(props, formData, undefined, undefined, undefined, true);
+    this.state = {
+      ...this.getStateFromProps(props, formData, undefined, undefined, undefined, true),
+      _prevExtraErrors: props.extraErrors,
+    };
     if (onChange && !deepEquals(this.state.formData, formData)) {
       onChange(toIChangeEvent(this.state));
     }
@@ -1219,17 +1256,12 @@ export default class Form<
     const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
     const { errors: prevErrors } = this.state;
     const schemaValidation = this.validate(formData);
-    let errors = schemaValidation.errors;
-    let errorSchema = schemaValidation.errorSchema;
-    const schemaValidationErrors = errors;
-    const schemaValidationErrorSchema = errorSchema;
-    const hasError = errors.length > 0 || (extraErrors && extraErrorsBlockSubmit);
+    // Always merge extraErrors so they remain visible in state regardless of extraErrorsBlockSubmit.
+    const { errors, errorSchema } = extraErrors ? this.mergeErrors(schemaValidation, extraErrors) : schemaValidation;
+    // hasError gates submission: schema errors always block; extraErrors only block when
+    // extraErrorsBlockSubmit is set (non-breaking default: extraErrors are informational only).
+    const hasError = schemaValidation.errors.length > 0 || (extraErrors && extraErrorsBlockSubmit);
     if (hasError) {
-      if (extraErrors) {
-        const merged = validationDataMerge(schemaValidation, extraErrors);
-        errorSchema = merged.errorSchema;
-        errors = merged.errors;
-      }
       if (focusOnFirstError) {
         if (typeof focusOnFirstError === 'function') {
           focusOnFirstError(errors[0]);
@@ -1241,8 +1273,8 @@ export default class Form<
         {
           errors,
           errorSchema,
-          schemaValidationErrors,
-          schemaValidationErrorSchema,
+          schemaValidationErrors: schemaValidation.errors,
+          schemaValidationErrorSchema: schemaValidation.errorSchema,
         },
         () => {
           if (onError) {
@@ -1252,6 +1284,14 @@ export default class Form<
           }
         },
       );
+    } else if (errors.length > 0) {
+      // Non-blocking extraErrors are present — update display state without triggering onError.
+      this.setState({
+        errors,
+        errorSchema,
+        schemaValidationErrors: [],
+        schemaValidationErrorSchema: {},
+      });
     } else if (prevErrors.length > 0) {
       this.setState({
         errors: [],

package/src/components/fields/ArrayField.tsx

@@ -199,7 +199,8 @@ function ArrayAsMultiSelect<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   const { widgets, schemaUtils, globalFormOptions, globalUiOptions } = registry;
   const itemsSchema = schemaUtils.retrieveSchema(schema.items as S, items);
-  const enumOptions = optionsList<T[], S, F>(itemsSchema, uiSchema);
+  const itemsUiSchema = (uiSchema?.items ?? {}) as UiSchema<T[], S, F>;
+  const enumOptions = optionsList<T[], S, F>(itemsSchema, itemsUiSchema);
   const { widget = 'select', title: uiTitle, ...options } = getUiOptions<T[], S, F>(uiSchema, globalUiOptions);
   const Widget = getWidget<T[], S, F>(schema, widget, widgets);
   const label = uiTitle ?? schema.title ?? name;