From 36016b9a96bf50a2fed2c7d42f58a01da6fc5223 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Wed, 26 Jun 2024 11:30:43 +0100
Subject: [PATCH] feat: Scroll active list item into view (#3320)

---
 .../@planx/components/List/Public/index.test.tsx    |  1 +
 .../src/@planx/components/List/Public/index.tsx     | 13 ++++++++++---
 2 files changed, 11 insertions(+), 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
index aa47784682..2d4ce28ced 100644
--- 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
index 44117493dc..66efdcd9d9 100644
--- 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}`}