feat: Scroll active list item into view (#3320)

theopensystemslab · Jun 26, 2024 · 36016b9 · 36016b9
1 parent be6a176
commit 36016b9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
@@ -13,6 +13,7 @@ import { mockMaxOneProps } from "../schemas/mocks/MaxOne";
 import { mockZooPayload, mockZooProps } from "../schemas/mocks/Zoo";
 
 jest.setTimeout(20_000);
+Element.prototype.scrollIntoView = jest.fn();
 
 describe("Basic UI", () => {
   it("renders correctly", () => {

diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -9,7 +9,7 @@ import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
 import { PublicProps } from "@planx/components/ui";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 import InputRow from "ui/shared/InputRow";
@@ -67,12 +67,19 @@ const ActiveListCard: React.FC<{
 }> = ({ index: i }) => {
   const { schema, saveItem, cancelEditItem, errors, isPageComponent } =
     useListContext();
-
+
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ behavior: "smooth" })
+    }
+  }, []);
+
   return (
     <ErrorWrapper
       error={errors.unsavedItem ? "Please save in order to continue" : ""}
     >
-      <ListCard data-testid={`list-card-${i}`}>
+      <ListCard data-testid={`list-card-${i}`} ref={ref}>
         <Typography component="h2" variant="h3">
           {schema.type}
           {!isPageComponent && ` ${i + 1}`}