From ed04c8b4836c5929085b14484234c210361ad13d Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 2 Oct 2024 15:09:11 +0200
Subject: [PATCH 1/2] keep tabs expanded on geojson change

---
 .../@planx/components/MapAndLabel/Public/Context.tsx | 12 ++++++++----
 .../@planx/components/MapAndLabel/Public/index.tsx   |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index d23d6521f7..688e202631 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -32,7 +32,7 @@ interface MapAndLabelContextValue {
   validateAndSubmitForm: () => void;
   isFeatureInvalid: (index: number) => boolean;
   addInitialFeaturesToMap: (features: Feature[]) => void;
-  editFeature: (index: number) => void;
+  editFeatureInForm: (index: number) => void;
   copyFeature: (sourceIndex: number, destinationIndex: number) => void;
   removeFeature: (index: number) => void;
   mapAndLabelProps: PresentationalProps;
@@ -117,6 +117,11 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
     addFeatureToMap(event.detail);
     addFeatureToForm();
+
+    if (event.detail["EPSG:3857"].features) {
+      // handleGeoJSONChange is triggered repeatedly when editing a feature on the map (eg dragging it); ensure latest tab stays active/expanded
+      setActiveIndex(event.detail["EPSG:3857"].features.length - 1);
+    }
   };
 
   const [features, setFeatures] = useGeoJSONChange(MAP_ID, handleGeoJSONChange);
@@ -145,7 +150,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     formik.handleSubmit();
   };
 
-  const editFeature = (index: number) => {
+  const editFeatureInForm = (index: number) => {
     setActiveIndex(index);
   };
 
@@ -161,7 +166,6 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const addInitialFeaturesToMap = (features: Feature[]) => {
     setFeatures(features);
-    // setActiveIndex(features.length - 1);
   };
 
   const addFeatureToForm = () => {
@@ -231,7 +235,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
         formik,
         validateAndSubmitForm,
         addInitialFeaturesToMap,
-        editFeature,
+        editFeatureInForm,
         copyFeature,
         removeFeature,
         isFeatureInvalid,
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index f55921d07f..cc7c2931e4 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -61,7 +61,7 @@ const VerticalFeatureTabs: React.FC = () => {
     activeIndex,
     formik,
     features,
-    editFeature,
+    editFeatureInForm,
     isFeatureInvalid,
     removeFeature,
   } = useMapAndLabelContext();
@@ -92,7 +92,7 @@ const VerticalFeatureTabs: React.FC = () => {
           variant="scrollable"
           value={activeIndex.toString()}
           onChange={(_e, newValue) => {
-            editFeature(parseInt(newValue, 10));
+            editFeatureInForm(parseInt(newValue, 10));
           }}
           aria-label="Select a feature to enter data"
           TabIndicatorProps={{

From 214c74e756af89f012ff97360ca9a6572cb05c91 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 3 Oct 2024 10:23:10 +0200
Subject: [PATCH 2/2] active tab matches feature being modified

---
 .../components/MapAndLabel/Public/Context.tsx | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 688e202631..a26e98c991 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -115,12 +115,25 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
       return;
     }
 
-    addFeatureToMap(event.detail);
-    addFeatureToForm();
-
-    if (event.detail["EPSG:3857"].features) {
-      // handleGeoJSONChange is triggered repeatedly when editing a feature on the map (eg dragging it); ensure latest tab stays active/expanded
-      setActiveIndex(event.detail["EPSG:3857"].features.length - 1);
+    if (event.detail) {
+      // If the user added a feature to the map, the dispatched event will contain more features than form state
+      const userAddedFeature =
+        event.detail["EPSG:3857"].features.length >
+        formik.values.schemaData.length;
+
+      if (userAddedFeature) {
+        addFeatureToMap(event.detail);
+        addFeatureToForm();
+      } else {
+        const modifiedFeatures = event.detail["EPSG:3857"].features;
+        setFeatures(modifiedFeatures);
+
+        // If the user is editing an existing feature on the map, the modified feature aka active tab should be last item in features
+        const lastModifiedFeature =
+          event.detail["EPSG:3857"].features.slice(-1)[0];
+        const lastModifiedLabel = lastModifiedFeature?.properties?.label;
+        setActiveIndex(parseInt(lastModifiedLabel) - 1);
+      }
     }
   };
 
@@ -159,8 +172,10 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const addFeatureToMap = (geojson: GeoJSONChange) => {
     resetErrors();
+
     const newFeatures = geojson["EPSG:3857"].features;
     setFeatures(newFeatures);
+
     setActiveIndex(newFeatures.length - 1);
   };
 
@@ -179,8 +194,6 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     if (schema.max && updatedFeatures.length > schema.max) {
       setMaxError(true);
     }
-
-    setActiveIndex(activeIndex + 1);
   };
 
   const copyFeature = (sourceIndex: number, destinationIndex: number) => {