Fixed issue where form validation errors stay on the page after user fixed the causes (rjsf-team#844)

* fixed issue where form validation errors stay on the page even after user resolved the issues * added unit tests for reset error state bug * fix broken unit test * updated unit tests for Form_test with more assertions

Author: stepbackj

src/components/Form.js

@@ -149,10 +149,11 @@ export default class Form extends Component {
  }
  }
 
- if (this.props.onSubmit) {
- this.props.onSubmit({ ...this.state, status: "submitted" });
- }
- this.setState({ errors: [], errorSchema: {} });
+ setState(this, { errors: [], errorSchema: {} }, () => {
+ if (this.props.onSubmit) {
+ this.props.onSubmit({ ...this.state, status: "submitted" });
+ }
+ });
  };
 
  getRegistry() {

test/Form_test.js

@@ -269,8 +269,15 @@ describe("Form", () => {
  });
 
  describe("Custom submit buttons", () => {
- it("should submit the form when clicked", () => {
- const onSubmit = sandbox.spy();
+ it("should submit the form when clicked", done => {
+ let submitCount = 0;
+ const onSubmit = () => {
+ submitCount++;
+ if (submitCount === 2) {
+ done();
+ }
+ };
+
  const comp = renderIntoDocument(
  <Form onSubmit={onSubmit} schema={{}}>
  <button type="submit">Submit</button>
@@ -281,7 +288,6 @@ describe("Form", () => {
  const buttons = node.querySelectorAll("button[type=submit]");
  buttons[0].click();
  buttons[1].click();
- sinon.assert.calledTwice(onSubmit);
  });
  });
 
@@ -1008,6 +1014,34 @@ describe("Form", () => {
  })
  );
  });
+
+ it("should reset errors and errorSchema state to initial state after correction and resubmission", () => {
+ const onError = sandbox.spy();
+ const { comp, node } = createFormComponent({
+ schema,
+ onError,
+ });
+
+ Simulate.change(node.querySelector("input[type=text]"), {
+ target: { value: "short" },
+ });
+ Simulate.submit(node);
+
+ expect(comp.state.errorSchema).eql({
+ __errors: ["should NOT be shorter than 8 characters"],
+ });
+ expect(comp.state.errors.length).eql(1);
+ sinon.assert.calledOnce(onError);
+
+ Simulate.change(node.querySelector("input[type=text]"), {
+ target: { value: "long enough" },
+ });
+ Simulate.submit(node);
+
+ expect(comp.state.errorSchema).eql({});
+ expect(comp.state.errors).eql([]);
+ sinon.assert.calledOnce(onError);
+ });
  });
 
  describe("root level", () => {