Merge pull request #6278 from CitizenLabDotCo/TAN-479-fix-error-messa…

…ge-scroll [TAN-479] Scroll to error message in JSON forms
CitizenLabDotCo · Nov 2, 2023 · febc2db · febc2db
2 parents 893ad5f + a40e621
commit febc2db
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/front/app/components/Form/Components/ErrorDisplay.tsx b/front/app/components/Form/Components/ErrorDisplay.tsx
@@ -155,7 +155,7 @@ export default ({ fieldPath, ajvErrors, didBlur }: Props) => {
       enter={true}
       exit={true}
     >
-      <Container role="alert" className="e2e-error-message">
+      <Container role="alert" className="e2e-error-message" id="error-display">
         <ContainerInner>
           <ErrorIcon name="alert-circle" fill={colors.error} />
 

diff --git a/front/app/components/Form/Components/Layouts/CLPageLayout.tsx b/front/app/components/Form/Components/Layouts/CLPageLayout.tsx
@@ -73,6 +73,7 @@ const CLPageLayout = memo(
       .elements as PageType[];
     const [uiPages, setUiPages] = useState<PageType[]>(pageTypeElements);
     const [userPagePath] = useState<PageType[]>([]);
+    const [scrollToError, setScrollToError] = useState(false);
     const theme = useTheme();
     const formState = useJsonForms();
     const isSmallerThanPhone = useBreakpoint('phone');
@@ -100,6 +101,16 @@ const CLPageLayout = memo(
       setUiPages(visiblePages);
     }, [formState.core?.data, uischema]);
 
+    useEffect(() => {
+      if (scrollToError) {
+        // Scroll to the first field with an error
+        document
+          .getElementById('error-display')
+          ?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        setScrollToError(false);
+      }
+    }, [scrollToError]);
+
     const scrollToTop = () => {
       if (useTopAnchor) {
         topAnchorRef.current.scrollIntoView();
@@ -134,6 +145,7 @@ const CLPageLayout = memo(
         setIsLoading(false);
       } else {
         setShowAllErrors?.(true);
+        setScrollToError(true);
       }
     };
 

diff --git a/front/app/components/Form/index.tsx b/front/app/components/Form/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, ReactElement, useState } from 'react';
+import React, { memo, ReactElement, useEffect, useState } from 'react';
 
 // jsonforms
 import {
@@ -120,11 +120,22 @@ const Form = memo(
 
     const [apiErrors, setApiErrors] = useState<CLErrors | undefined>();
     const [loading, setLoading] = useState(false);
+    const [scrollToError, setScrollToError] = useState(false);
     const [showAllErrors, setShowAllErrors] = useState(false);
 
     const isSurvey = config === 'survey';
     const showSubmitButton = !isSurvey;
 
+    useEffect(() => {
+      if (scrollToError) {
+        // Scroll to the first field with an error
+        document
+          .getElementById('error-display')
+          ?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        setScrollToError(false);
+      }
+    }, [scrollToError]);
+
     const layoutType = layout
       ? layout
       : isCategorization(uiSchema)
@@ -150,10 +161,12 @@ const Form = memo(
         try {
           await onSubmit(submissionData);
         } catch (e) {
+          setScrollToError(true);
           setApiErrors(e.errors);
         }
         setLoading(false);
       }
+      setScrollToError(true);
     };
 
     useObserveEvent(submitOnEvent, handleSubmit);