Fix #4962 (#4979)

* fix #4962

Fixed `validateForm()` clearing `extraErrors` from state when schema validation passes

* review feedback

* review changes #2

Author: nickgros

CHANGELOG.md

@@ -26,6 +26,8 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Fixed `extraErrors` not displaying on first async set after submit, fixing [#4965](https://github.com/rjsf-team/react-jsonschema-form/issues/4965)
 - Updated multi-select ArrayFields to properly use the `items` uiSchema for enumerated options, fixing [#4955](https://github.com/rjsf-team/react-jsonschema-form/issues/4955)
+- Fixed `validateForm()` clearing `extraErrors` from state when schema validation passes, fixing [#4962](https://github.com/rjsf-team/react-jsonschema-form/issues/4962)
+
 
 ## @rjsf/utils
 

packages/core/src/components/Form.tsx

@@ -1256,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]);
@@ -1278,8 +1273,8 @@ export default class Form<
         {
           errors,
           errorSchema,
-          schemaValidationErrors,
-          schemaValidationErrorSchema,
+          schemaValidationErrors: schemaValidation.errors,
+          schemaValidationErrorSchema: schemaValidation.errorSchema,
         },
         () => {
           if (onError) {
@@ -1289,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: [],

packages/core/test/Form.test.tsx

@@ -4877,6 +4877,154 @@ describe('validateForm()', () => {
     errors = node.querySelectorAll('.error-detail');
     expect(errors).toHaveLength(0);
   });
+
+  it('Should keep non-blocking extraErrors in state when schema is valid and extraErrorsBlockSubmit is not set', () => {
+    const formRef = createRef<Form>();
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: {
+        foo: { type: 'string' },
+      },
+    };
+    const extraErrors = {
+      foo: {
+        __errors: ['async error for foo'],
+      },
+    } as unknown as ErrorSchema;
+    const props: NoValFormProps = {
+      ref: formRef,
+      schema,
+      formData: { foo: 'valid' },
+      extraErrors,
+    };
+    const { onError } = createFormComponent(props);
+
+    let result: boolean | undefined;
+    act(() => {
+      result = formRef.current!.validateForm();
+    });
+
+    // Should return true (non-blocking)
+    expect(result).toBe(true);
+    // extraErrors should remain visible in state
+    expect(formRef.current!.state.errors).toHaveLength(1);
+    expect(formRef.current!.state.errors[0].message).toBe('async error for foo');
+    expect(formRef.current!.state.errorSchema).toEqual(extraErrors);
+    // onError should NOT be called for non-blocking errors
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it('Should return false and call onError when extraErrors are present with extraErrorsBlockSubmit set', () => {
+    const formRef = createRef<Form>();
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: {
+        foo: { type: 'string' },
+      },
+    };
+    const extraErrors = {
+      foo: {
+        __errors: ['blocking async error'],
+      },
+    } as unknown as ErrorSchema;
+    const props: NoValFormProps = {
+      ref: formRef,
+      schema,
+      formData: { foo: 'valid' },
+      extraErrors,
+      extraErrorsBlockSubmit: true,
+    };
+    const { onError } = createFormComponent(props);
+
+    let result: boolean | undefined;
+    act(() => {
+      result = formRef.current!.validateForm();
+    });
+
+    // Should return false (blocking)
+    expect(result).toBe(false);
+    // Merged errors should be in state
+    expect(formRef.current!.state.errors).toHaveLength(1);
+    expect(formRef.current!.state.errors[0].message).toBe('blocking async error');
+    // onError SHOULD be called
+    expect(onError).toHaveBeenCalledWith(
+      expect.arrayContaining([expect.objectContaining({ message: 'blocking async error' })]),
+    );
+  });
+
+  it('Should show both schema and extraErrors in state when schema is invalid regardless of extraErrorsBlockSubmit', () => {
+    const formRef = createRef<Form>();
+    const schema: RJSFSchema = {
+      type: 'object',
+      required: ['foo'],
+      properties: {
+        foo: { type: 'string' },
+      },
+    };
+    const extraErrors = {
+      foo: {
+        __errors: ['async error for foo'],
+      },
+    } as unknown as ErrorSchema;
+    const props: NoValFormProps = {
+      ref: formRef,
+      schema,
+      formData: {},
+      extraErrors,
+      // extraErrorsBlockSubmit intentionally omitted
+    };
+    createFormComponent(props);
+
+    let result: boolean | undefined;
+    act(() => {
+      result = formRef.current!.validateForm();
+    });
+
+    // Schema error blocks submission → false
+    expect(result).toBe(false);
+    // Both schema error and extra error should be in state
+    const errorMessages = formRef.current!.state.errors.map((e) => e.message);
+    expect(errorMessages).toContain("must have required property 'foo'");
+    expect(errorMessages).toContain('async error for foo');
+  });
+
+  it('Should clear extraErrors from state when extraErrors prop is removed and validateForm is called again', () => {
+    const formRef = createRef<Form>();
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: {
+        foo: { type: 'string' },
+      },
+    };
+    const extraErrors = {
+      foo: {
+        __errors: ['async error for foo'],
+      },
+    } as unknown as ErrorSchema;
+    const props: NoValFormProps = {
+      ref: formRef,
+      schema,
+      formData: { foo: 'valid' },
+      extraErrors,
+    };
+    const { rerender } = createFormComponent(props);
+
+    // First call: extraErrors should appear in state
+    act(() => {
+      formRef.current!.validateForm();
+    });
+    expect(formRef.current!.state.errors).toHaveLength(1);
+
+    // Rerender without extraErrors
+    rerender({ ...props, extraErrors: undefined });
+
+    // Second call: no extraErrors, no schema errors → state should be cleared
+    act(() => {
+      formRef.current!.validateForm();
+    });
+    expect(formRef.current!.state.errors).toHaveLength(0);
+    expect(formRef.current!.state.errorSchema).toEqual({});
+  });
 });
 
 describe('setFieldValue()', () => {