Fix for clearing errors after updating and submitting form

* Fix for clearing errors after updating and submitting form * Add comments and additional UI tests
rjsf-team · Sep 10, 2021 · 8bc7106 · 8bc7106
1 parent 1b3b70c
commit 8bc7106
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/packages/core/src/components/Form.js b/packages/core/src/components/Form.js
@@ -364,6 +364,8 @@ export default class Form extends Component {
       }
     }
 
+    // There are no errors generated through schema validation.
+    // Check for user provided errors and update state accordingly.
     let errorSchema;
     let errors;
     if (this.props.extraErrors) {
@@ -375,7 +377,13 @@ export default class Form extends Component {
     }
 
     this.setState(
-      { formData: newFormData, errors: errors, errorSchema: errorSchema },
+      {
+        formData: newFormData,
+        errors: errors,
+        errorSchema: errorSchema,
+        schemaValidationErrors: [],
+        schemaValidationErrorSchema: {},
+      },
       () => {
         if (this.props.onSubmit) {
           this.props.onSubmit(

diff --git a/packages/core/test/Form_test.js b/packages/core/test/Form_test.js
@@ -1497,7 +1497,7 @@ describeRepeated("Form common", createFormComponent => {
       });
 
       it("should reset errors and errorSchema state to initial state after correction and resubmission", () => {
-        const { node, onError } = createFormComponent({
+        const { node, onError, onSubmit } = createFormComponent({
           schema,
         });
 
@@ -1524,6 +1524,37 @@ describeRepeated("Form common", createFormComponent => {
         });
         Simulate.submit(node);
         sinon.assert.notCalled(onError);
+        sinon.assert.calledWithMatch(onSubmit.lastCall, {
+          errors: [],
+          errorSchema: {},
+          schemaValidationErrors: [],
+          schemaValidationErrorSchema: {},
+        });
+      });
+
+      it("should reset errors from UI after correction and resubmission", () => {
+        const { node } = createFormComponent({
+          schema,
+        });
+
+        Simulate.change(node.querySelector("input[type=text]"), {
+          target: { value: "short" },
+        });
+        Simulate.submit(node);
+
+        const errorListHTML =
+          '<li class="text-danger">should NOT be shorter than 8 characters</li>';
+        const errors = node.querySelectorAll(".error-detail");
+        // Check for errors attached to the field
+        expect(errors).to.have.lengthOf(1);
+        expect(errors[0]).to.have.property("innerHTML");
+        expect(errors[0].innerHTML).to.be.eql(errorListHTML);
+
+        Simulate.change(node.querySelector("input[type=text]"), {
+          target: { value: "long enough" },
+        });
+        Simulate.submit(node);
+        expect(node.querySelectorAll(".error-detail")).to.have.lengthOf(0);
       });
     });