From 5ace198c8c60cc35373986991e75054315a4e46a Mon Sep 17 00:00:00 2001
From: Matthieu Foucault <matthieu@button.is>
Date: Fri, 13 May 2022 17:19:22 -0700
Subject: [PATCH] feat: FormBase clears the extraErrors on submit

---
 app/components/Form/FormBase.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/components/Form/FormBase.tsx b/app/components/Form/FormBase.tsx
index 35d5ef0473..0187b8f086 100644
--- a/app/components/Form/FormBase.tsx
+++ b/app/components/Form/FormBase.tsx
@@ -1,6 +1,6 @@
 import formTheme from "lib/theme/FormWithTheme";
-import { forwardRef, useEffect, useMemo, useState } from "react";
-import { FormProps, AjvError, withTheme } from "@rjsf/core";
+import { FormEvent, forwardRef, useEffect, useMemo, useState } from "react";
+import { FormProps, AjvError, withTheme, ISubmitEvent } from "@rjsf/core";
 import validateFormData from "@rjsf/core/dist/cjs/validate";
 import { customTransformErrors } from "lib/theme/customTransformErrors";
 import {
@@ -38,7 +38,20 @@ const FormBase: React.ForwardRefRenderFunction<any, FormPropsWithTheme<any>> = (
         ).errorSchema
       );
     }
-  }, []);
+  }, [props.schema, props.validateOnMount]);
+
+  const handleSubmit = (
+    e: ISubmitEvent<any>,
+    nativeEvent: FormEvent<HTMLFormElement>
+  ) => {
+    setExtraErrors(undefined);
+    props.onSubmit?.(e, nativeEvent);
+  };
+
+  const handleError = (e: any) => {
+    setExtraErrors(undefined);
+    props.onError?.(e);
+  };
 
   return (
     <>
@@ -53,6 +66,8 @@ const FormBase: React.ForwardRefRenderFunction<any, FormPropsWithTheme<any>> = (
         omitExtraData
         showErrorList={false}
         tagName={props.tagName}
+        onSubmit={handleSubmit}
+        onError={handleError}
       ></Form>
       <style jsx>{`
         :global(label) {