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..a26e98c991 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; @@ -115,8 +115,26 @@ export const MapAndLabelProvider: React.FC = ( return; } - addFeatureToMap(event.detail); - addFeatureToForm(); + 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); + } + } }; const [features, setFeatures] = useGeoJSONChange(MAP_ID, handleGeoJSONChange); @@ -145,7 +163,7 @@ export const MapAndLabelProvider: React.FC = ( formik.handleSubmit(); }; - const editFeature = (index: number) => { + const editFeatureInForm = (index: number) => { setActiveIndex(index); }; @@ -154,14 +172,15 @@ export const MapAndLabelProvider: React.FC = ( const addFeatureToMap = (geojson: GeoJSONChange) => { resetErrors(); + const newFeatures = geojson["EPSG:3857"].features; setFeatures(newFeatures); + setActiveIndex(newFeatures.length - 1); }; const addInitialFeaturesToMap = (features: Feature[]) => { setFeatures(features); - // setActiveIndex(features.length - 1); }; const addFeatureToForm = () => { @@ -175,8 +194,6 @@ export const MapAndLabelProvider: React.FC = ( if (schema.max && updatedFeatures.length > schema.max) { setMaxError(true); } - - setActiveIndex(activeIndex + 1); }; const copyFeature = (sourceIndex: number, destinationIndex: number) => { @@ -231,7 +248,7 @@ export const MapAndLabelProvider: React.FC = ( 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={{