feat: scroll the window to the top of the form after submitting it su…

…ccesfully (#43) * feat: scroll the window to the top of the form after submitting it succesfully * fix: guard against null values
collective · Oct 7, 2022 · 3c26486 · 3c26486
1 parent b032edc
commit 3c26486
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
@@ -46,6 +46,7 @@ const FormView = ({
   resetFormState,
   resetFormOnError,
   captcha,
+  id,
 }) => {
   const intl = useIntl();
 
@@ -91,6 +92,7 @@ const FormView = ({
             </Message>
           ) : (
             <Form
+              id={id}
               loading={formState.loading}
               onSubmit={onSubmit}
               autoComplete="off"

diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -204,13 +204,25 @@ const View = ({ data, id, path }) => {
     onChangeFormData,
   });
 
+  const formid = `form-${id}`;
+
   useEffect(() => {
     if (submitResults?.loaded) {
       setFormState({
         type: FORM_STATES.success,
         result: intl.formatMessage(messages.formSubmitted),
       });
       captcha.reset();
+      const formItem = document.getElementById(formid);
+      if (formItem !== null) {
+        const formItemPosition = formItem.getBoundingClientRect();
+        formItemPosition !== null &&
+          window.scrollTo({
+            top: formItemPosition.x,
+            left: formItemPosition.y,
+            behavior: 'smooth',
+          });
+      }
     } else if (submitResults?.error) {
       let errorDescription = `${
         JSON.parse(submitResults.error.response?.text ?? '{}')?.message
@@ -227,6 +239,7 @@ const View = ({ data, id, path }) => {
 
   return (
     <FormView
+      id={formid}
       formState={formState}
       formErrors={formErrors}
       formData={formData}