shift labels after removing non-last feature

editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx

@@ -183,21 +183,33 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   };
 
   const removeFeatureFromMap = (index: number) => {
-    // Order of features varies by change/modification, filter on label not array position
+    // Order of features can vary by change/modification, filter on label not array position
+    const label = `${index + 1}`;
     const filteredFeatures = features?.filter(
-      (feature) => feature.properties?.label !== `${index + 1}`,
+      (f) => f.properties?.label !== label,
     );
-    // TODO: shift labels so they remain incremental
+
+    // If the removed feature was not the final one in the array, shift all feature labels after the removed feature so they remain incremental
+    if (features && features?.length > index) {
+      filteredFeatures?.map((f) => {
+        if (f.properties && Number(f.properties?.label) > Number(label)) {
+          const newLabel = Number(f.properties.label) - 1;
+          Object.assign(f, { properties: { label: `${newLabel}` } });
+        }
+      });
+    }
     setFeatures(filteredFeatures);
+
     // `updateMapKey` is set as a unique `key` prop on the map container to force a re-render of its children (aka <my-map />) on change
     setUpdateMapKey(updateMapKey + 1);
   };
 
   const removeFeature = (index: number) => {
     resetErrors();
-    setActiveIndex(activeIndex - 1);
     removeFeatureFromForm(index);
     removeFeatureFromMap(index);
+    // Set active index as highest tab after removal, so that when you "add" a new feature the tabs increment correctly
+    setActiveIndex((features && features.length - 2) || activeIndex - 1);
   };
 
   return (