From 8b45702dee628aa9d6c95df95abf9f00eb57b6f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Wed, 26 Jun 2024 10:09:33 +0100
Subject: [PATCH] feat: Scroll new list item into view

---
 .../src/@planx/components/List/Public/index.tsx          | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

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..5a7ce22cd9 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,15 @@ const ActiveListCard: React.FC<{
 }> = ({ index: i }) => {
   const { schema, saveItem, cancelEditItem, errors, isPageComponent } =
     useListContext();
-
+  
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => 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}`}