Enhance error handling and scrolling behavior in error summary and catch details components

Author: thefishman-fish

app/components/errorSummary.tsx

@@ -16,10 +16,12 @@ export const ErrorSummary = ({
 }: React.PropsWithChildren<IErrorSummaryProps>) => {
   const { t } = useTranslation(["errorsText", "common"]);
   const summaryRef = useRef<HTMLDivElement>(null);
+  const hasFocusedRef = useRef(false);
 
   useEffect(() => {
-    if (errors.length > 0) {
+    if (errors.length > 0 && !hasFocusedRef.current) {
       summaryRef.current?.focus();
+      hasFocusedRef.current = true;
     }
   }, [errors]);
 

app/hooks/useScrollOnPageError.ts

@@ -1,12 +1,14 @@
-import isEmpty from "lodash/isEmpty";
-import { useEffect } from "react";
-import { scrollToId } from "~/helpers";
-import type { IError, IErrorsTransformed } from "~/types";
-
-export const useScrollOnPageError = (errors: IError[] | IErrorsTransformed | undefined) => {
-  useEffect(() => {
-    if (!isEmpty(errors)) {
-      scrollToId("errorIsland");
-    }
-  }, [errors]);
-};
+import isEmpty from "lodash/isEmpty";
+import { useEffect } from "react";
+import { scrollToId } from "~/helpers";
+import type { IError, IErrorsTransformed } from "~/types";
+
+export const useScrollOnPageError = (errors: IError[] | IErrorsTransformed | undefined) => {
+  useEffect(() => {
+    if (!isEmpty(errors)) {
+      scrollToId("errorIsland");
+      const el = globalThis.document.getElementById("errorIsland") as HTMLDivElement | null;
+      el?.focus();
+    }
+  }, [errors]);
+};

app/models/addCatchDetails.server.ts

@@ -462,7 +462,7 @@ export const AddCatchDetailsAction = async (request: Request, params: Params): P
       return redirect("/forbidden");
     }
 
-    const recordsPerPage: number = parseInt(getEnv().PROCESSING_STATEMENT_CATCH_PER_PAGE, 10);
+    const recordsPerPage: number = Number.parseInt(getEnv().PROCESSING_STATEMENT_CATCH_PER_PAGE, 10);
     const ctches = getUpdatedCatches(updatedProcessingStatement, productId);
     const totalPages = Math.ceil(ctches.length / recordsPerPage);
 
@@ -472,7 +472,7 @@ export const AddCatchDetailsAction = async (request: Request, params: Params): P
 
   if (cancelCatch) {
     if (values["species"]) {
-      session.set("retainedSpecies", values["species"] as string);
+      session.set("retainedSpecies", values["species"]);
     }
     const redirectUrl = `/create-processing-statement/${documentNumber}/add-catch-details/${productId}?pageNo=${goToPage}`;
     return redirect(redirectUrl, {

app/routes/create-processing-statement.$documentNumber.add-catch-details._index.tsx

@@ -23,7 +23,7 @@ import {
 } from "~/composite-components";
 import type { Catch, pageLinks, ErrorResponse, Species, ICountry } from "~/types";
 import { getMeta, scrollToId, querySpecies, displayErrorMessagesInOrder } from "~/helpers";
-import { useIsHydrated } from "~/hooks";
+import { useIsHydrated, useScrollOnPageError } from "~/hooks";
 import { AddCatchDetailsAction, AddCatchDetailsLoader } from "~/models";
 
 interface ILoaderData {
@@ -644,15 +644,7 @@ const AddCatchDetailsIndex = () => {
   });
 
   const navigationLinks = populateNavigationLinks(previousLinkLayout, nextLinkLayout);
-
-  // Derive a boolean from errors to avoid object reference issues in useEffect
-  const hasErrors = !isEmpty(errors);
-
-  useEffect(() => {
-    if (hasErrors) {
-      scrollToId("errorIsland");
-    }
-  }, [hasErrors]); // Boolean primitive, safe to use as dependency
+  useScrollOnPageError(errors);
 
   useEffect(() => {
     if (response) {