fix: only scroll to error blurb on field errors mount

zesty-io · Jan 30, 2024 · 8d55b1b · 8d55b1b
1 parent 992d482
commit 8d55b1b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 20 deletions.
diff --git a/src/apps/content-editor/src/app/components/Editor/Editor.js b/src/apps/content-editor/src/app/components/Editor/Editor.js
@@ -38,6 +38,7 @@ export default memo(function Editor({
   saveClicked,
   onUpdateFieldErrors,
   fieldErrors,
+  hasErrors,
 }) {
   const dispatch = useDispatch();
   const isNewItem = itemZUID.slice(0, 3) === "new";
@@ -203,7 +204,7 @@ export default memo(function Editor({
   return (
     <ThemeProvider theme={theme}>
       <div className={styles.Fields}>
-        {saveClicked && (
+        {saveClicked && hasErrors && (
           <FieldError errors={fieldErrors} fields={activeFields} />
         )}
         {activeFields.length ? (

diff --git a/src/apps/content-editor/src/app/components/Editor/FieldError.tsx b/src/apps/content-editor/src/app/components/Editor/FieldError.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useRef, useEffect } from "react";
 import { Stack, Typography, Box, ThemeProvider } from "@mui/material";
 import DangerousRoundedIcon from "@mui/icons-material/DangerousRounded";
 import { theme } from "@zesty-io/material";
@@ -11,6 +11,17 @@ type FieldErrorProps = {
 };
 
 export const FieldError = ({ errors, fields }: FieldErrorProps) => {
+  const errorContainerEl = useRef(null);
+
+  // Scroll to the errors on mount
+  useEffect(() => {
+    errorContainerEl?.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "center",
+    });
+  }, []);
+
   const fieldErrors = useMemo(() => {
     const errorMap = Object.entries(errors)?.map(([name, errors]) => {
       let errorMessage = "";
@@ -36,29 +47,25 @@ export const FieldError = ({ errors, fields }: FieldErrorProps) => {
     return errorMap.sort((a, b) => a.sort - b.sort);
   }, [errors, fields]);
 
-  const hasErrors = fieldErrors?.some((error) => error.errorMessage);
   const fieldsWithErrors = fieldErrors?.filter((error) => error.errorMessage);
 
   const handleErrorClick = (fieldZUID: string) => {
     const fieldElement = document.getElementById(fieldZUID);
     fieldElement?.scrollIntoView({ behavior: "smooth" });
   };
 
-  if (!hasErrors) {
-    return <></>;
-  }
-
   return (
     <ThemeProvider theme={theme}>
       <Stack
         // when errors are present, scroll to the top of the error message
-        ref={(el) =>
-          el?.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-            inline: "center",
-          })
-        }
+        // ref={(el) => {
+        //   el?.scrollIntoView({
+        //     behavior: "smooth",
+        //     block: "center",
+        //     inline: "center",
+        //   });
+        // }}
+        ref={errorContainerEl}
         p={2}
         gap={1}
         borderRadius={1}

diff --git a/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx b/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import useIsMounted from "ismounted";
 import { useHistory, useParams } from "react-router-dom";
@@ -107,7 +107,7 @@ export const ItemCreate = () => {
     }
   }, [isPublishing, isPublished, publishedItem, willRedirect]);
 
-  useEffect(() => {
+  const hasErrors = useMemo(() => {
     const hasErrors = Object.values(fieldErrors)
       ?.map((error) => {
         return Object.values(error) ?? [];
@@ -118,6 +118,8 @@ export const ItemCreate = () => {
     if (!hasErrors) {
       setSaveClicked(false);
     }
+
+    return hasErrors;
   }, [fieldErrors]);
 
   const loadItemFields = async (modelZUID: string) => {
@@ -282,8 +284,9 @@ export const ItemCreate = () => {
           <div className={styles.Editor}>
             <Editor
               // @ts-ignore no types
-              active={active}
-              scrolled={setActive}
+              // active={active}
+              // scrolled={setActive}
+              hasErrors={hasErrors}
               itemZUID={itemZUID}
               item={item}
               items={content}

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Content/Content.js b/src/apps/content-editor/src/app/views/ItemEdit/Content/Content.js
@@ -76,6 +76,7 @@ export default function Content(props) {
               saveClicked={props.saveClicked}
               fieldErrors={props.fieldErrors}
               onUpdateFieldErrors={props.onUpdateFieldErrors}
+              hasErrors={props.hasErrors}
             />
           </Box>
         </Box>

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js b/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useState, useMemo } from "react";
 import {
   Switch,
   Route,
@@ -125,7 +125,7 @@ export default function ItemEdit() {
     };
   }, [modelZUID, itemZUID]);
 
-  useEffect(() => {
+  const hasErrors = useMemo(() => {
     const hasErrors = Object.values(fieldErrors)
       ?.map((error) => {
         return Object.values(error) ?? [];
@@ -136,6 +136,8 @@ export default function ItemEdit() {
     if (!hasErrors) {
       setSaveClicked(false);
     }
+
+    return hasErrors;
   }, [fieldErrors]);
 
   async function lockItem() {
@@ -464,6 +466,7 @@ export default function ItemEdit() {
                         setFieldErrors(errors);
                       }}
                       fieldErrors={fieldErrors}
+                      hasErrors={hasErrors}
                     />
                   )}
                 />