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 aea700dce5..3c918a7c63 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx @@ -11,6 +11,7 @@ import { SiteAddress } from "@planx/components/FindProperty/model"; import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer"; import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields"; import { Feature, FeatureCollection, GeoJsonObject } from "geojson"; +import sortBy from "lodash/sortBy"; import { useStore } from "pages/FlowEditor/lib/store"; import React, { useEffect, useState } from "react"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; @@ -60,6 +61,9 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({ const { schema, activeIndex, formik, editFeature, isFeatureInvalid } = useMapAndLabelContext(); + // Features is inherently sorted by recently added/modified, order tabs by stable labels + const sortedFeatures = sortBy(features, ["properties.label"]); + return ( = ({ borderColor: (theme) => theme.palette.border.main, }} > - {features.map((feature, i) => ( + {sortedFeatures.map((feature, i) => ( = ({ /> ))} - {features.map((feature, i) => ( + {sortedFeatures.map((feature, i) => (