fix: programmatic validation removes previous errors if all data is n…

…ow valid

CHANGELOG.md

@@ -20,6 +20,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/core
 
 - Updated `MultiSchemaField` to only merge top level required field fixing duplicate field and description.
+- Fixed programmatic validation (`validateForm()`) removes previous errors if all data is now valid.
 
 ## @rjsf/chakra-ui
 

packages/core/src/components/Form.tsx

@@ -729,13 +729,13 @@ export default class Form<
    */
   validateForm() {
     const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-    const { formData } = this.state;
+    const { formData, errors: prevErrors } = this.state;
     const schemaValidation = this.validate(formData);
     let errors = schemaValidation.errors;
     let errorSchema = schemaValidation.errorSchema;
     const schemaValidationErrors = errors;
     const schemaValidationErrorSchema = errorSchema;
-    if (errors.length > 0 || (extraErrors && extraErrorsBlockSubmit)) {
+    if (errors.length > 0 || prevErrors.length > 0 || (extraErrors && extraErrorsBlockSubmit)) {
       if (extraErrors) {
         const merged = validationDataMerge(schemaValidation, extraErrors);
         errorSchema = merged.errorSchema;

packages/core/test/Form.test.jsx

@@ -4182,4 +4182,47 @@ describe('Form omitExtraData and liveOmit', () => {
       expect(checkbox.checked).to.eq(true);
     });
   });
+
+  describe('validateForm()', () => {
+    it.only('Should update state when data updated from invalid to valid', () => {
+      const ref = createRef();
+      const props = {
+        schema: {
+          type: 'object',
+          required: ['input'],
+          properties: {
+            input: {
+              type: 'string',
+            },
+          },
+        },
+        formData: {},
+        ref,
+      };
+      const { comp, node } = createFormComponent(props);
+
+      // trigger programmatic validation and make sure an error appears.
+      ref.current.validateForm();
+      let errors = node.querySelectorAll('.error-detail');
+      expect(errors).to.have.lengthOf(1);
+      expect(errors[0].textContent).to.be.eql("must have required property 'input'");
+
+      // populate the input and simulate a re-render from the parent.
+      const textNode = node.querySelector('#root_input');
+      Simulate.change(textNode, {
+        target: { value: 'populated value' },
+      });
+      setProps(comp, { ...props, formData: { input: 'populated value' } });
+
+      // error should still be present.
+      errors = node.querySelectorAll('.error-detail');
+      expect(errors).to.have.lengthOf(1);
+      expect(errors[0].textContent).to.be.eql("must have required property 'input'");
+
+      // trigger programmatic validation again and make sure the error disappears.
+      ref.current.validateForm();
+      errors = node.querySelectorAll('.error-detail');
+      expect(errors).to.have.lengthOf(0);
+    });
+  });
 });