Fix blocked navigation between pages on submission form

Author: lmcnulty

site/gatsby-site/src/components/forms/SubmissionWizard/StepOne.js

@@ -99,6 +99,7 @@ const StepOne = (props) => {
           submissionReset={props.submissionReset}
           urlFromQueryString={props.urlFromQueryString}
           setSavingInLocalStorage={props.setSavingInLocalStorage}
+          returning={props.returning}
         />
       </Formik>
     </StepContainer>
@@ -116,6 +117,7 @@ const FormDetails = ({
   submissionReset,
   urlFromQueryString,
   setSavingInLocalStorage,
+  returning,
 }) => {
   const { t } = useTranslation(['submit']);
 
@@ -172,6 +174,16 @@ const FormDetails = ({
     }
   }, [urlFromQueryString]);
 
+  useEffect(() => {
+    if (returning) {
+      validateForm().then((invalidFields) => {
+        Object.keys(invalidFields).map((key) => {
+          setFieldTouched(key, true);
+        });
+      });
+    }
+  }, [returning]);
+
   const fetchNews = async (url) => {
     await parseNewsUrl(url);
     Object.keys(errors).map((key) => {

site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js

@@ -199,6 +199,7 @@ const StepThree = (props) => {
           setSavingInLocalStorage={props.setSavingInLocalStorage}
           submissionComplete={props.submissionComplete}
           submissionReset={props.submissionReset}
+          returning={props.returning}
         />
       </Formik>
     </StepContainer>
@@ -216,6 +217,7 @@ const FormDetails = ({
   submissionReset,
   entityNames,
   setSavingInLocalStorage,
+  returning,
 }) => {
   const { t } = useTranslation(['submit']);
 
@@ -293,6 +295,16 @@ const FormDetails = ({
     saveInLocalStorage(values);
   }, [values]);
 
+  useEffect(() => {
+    if (returning) {
+      validateForm().then((invalidFields) => {
+        Object.keys(invalidFields).map((key) => {
+          setFieldTouched(key, true);
+        });
+      });
+    }
+  }, [returning]);
+
   return (
     <>
       <Form>

site/gatsby-site/src/components/forms/SubmissionWizard/StepTwo.js

@@ -65,6 +65,7 @@ const StepTwo = (props) => {
           setSavingInLocalStorage={props.setSavingInLocalStorage}
           submissionComplete={props.submissionComplete}
           submissionReset={props.submissionReset}
+          returning={props.returning}
         />
       </Formik>
     </StepContainer>
@@ -81,6 +82,7 @@ const FormDetails = ({
   submissionComplete,
   submissionReset,
   setSavingInLocalStorage,
+  returning,
 }) => {
   const { t } = useTranslation(['submit']);
 
@@ -137,6 +139,16 @@ const FormDetails = ({
     saveInLocalStorage(values);
   }, [values]);
 
+  useEffect(() => {
+    if (returning) {
+      validateForm().then((invalidFields) => {
+        Object.keys(invalidFields).map((key) => {
+          setFieldTouched(key, true);
+        });
+      });
+    }
+  }, [returning]);
+
   const isUserDetailsComplete = user && user.first_name && user.last_name;
 
   return (

site/gatsby-site/src/components/forms/SubmitForm.js

@@ -351,7 +351,9 @@ const SubmitForm = () => {
             scrollToTop={() => {
               setTimeout(() => {
                 // This is needed to make it work in Firefox
-                submissionRef.current.scrollIntoView();
+                if (submissionRef.current) {
+                  submissionRef.current.scrollIntoView();
+                }
               }, 0);
             }}
             clearForm={clearForm}

site/gatsby-site/src/components/submissions/SubmissionWizard.js

@@ -31,6 +31,8 @@ const SubmissionWizard = ({
 
   const [parsingNews, setParsingNews] = useState(false);
 
+  const [returning, setReturning] = useState(false);
+
   const handleNextStep = async (newData, final = false) => {
     setSubmissionFailed(false);
     setSubmissionComplete(false);
@@ -55,6 +57,7 @@ const SubmissionWizard = ({
   };
 
   const handlePreviousStep = (newData) => {
+    setReturning(true);
     setData((prev) => ({ ...prev, ...newData }));
     scrollToTop();
     setCurrentStep((prev) => prev - 1);
@@ -168,7 +171,12 @@ const SubmissionWizard = ({
       Object.keys(invalidFields).map((key) => {
         setFieldTouched(key, true);
       });
-      setIsSubmitting(false);
+
+      if (last) {
+        setIsSubmitting(false);
+      } else {
+        submitForm(values, last);
+      }
     } else {
       submitForm(values, last);
     }
@@ -181,6 +189,7 @@ const SubmissionWizard = ({
         next={handleNextStep}
         data={data}
         name={t('Step 1 - main information')}
+        returning={returning}
         parseNewsUrl={parseNewsUrl}
         parsingNews={parsingNews}
         validateAndSubmitForm={validateAndSubmitForm}
@@ -196,6 +205,7 @@ const SubmissionWizard = ({
         previous={handlePreviousStep}
         data={data}
         name={t('Step 2 - additional information')}
+        returning={returning}
         validateAndSubmitForm={validateAndSubmitForm}
         submissionFailed={submissionFailed}
         submissionComplete={submissionComplete}
@@ -208,6 +218,7 @@ const SubmissionWizard = ({
         previous={handlePreviousStep}
         data={data}
         name={t('Step 3 - Tell us more')}
+        returning={returning}
         validateAndSubmitForm={validateAndSubmitForm}
         submissionFailed={submissionFailed}
         submissionComplete={submissionComplete}