Fix #18431

src/Umbraco.Web.UI.Client/src/packages/core/content/manager/content-data-manager.ts

@@ -2,7 +2,7 @@ import type { UmbContentDetailModel } from '../types.js';
 import { UmbElementWorkspaceDataManager } from './element-data-manager.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { appendToFrozenArray, jsonStringComparison } from '@umbraco-cms/backoffice/observable-api';
-import { UmbVariantId, type UmbEntityVariantModel } from '@umbraco-cms/backoffice/variant';
+import { UmbVariantId, umbVariantObjectCompare, type UmbEntityVariantModel } from '@umbraco-cms/backoffice/variant';
 
 export class UmbContentWorkspaceDataManager<
 	ModelType extends UmbContentDetailModel,
@@ -19,6 +19,27 @@ export class UmbContentWorkspaceDataManager<
 		this.#variantScaffold = variantScaffold;
 	}
 
+	protected override _sortCurrentData<GivenType extends Partial<ModelType> = Partial<ModelType>>(
+		persistedData: Partial<ModelType>,
+		currentData: GivenType,
+	): GivenType {
+		currentData = super._sortCurrentData(persistedData, currentData);
+		// Sort the variants in the same order as the persisted data:
+		const persistedVariants = persistedData.variants;
+		if (persistedVariants && currentData.variants) {
+			return {
+				...currentData,
+				variants: [...currentData.variants].sort(function (a, b) {
+					return (
+						persistedVariants.findIndex((x) => umbVariantObjectCompare(x, a)) -
+						persistedVariants.findIndex((x) => umbVariantObjectCompare(x, b))
+					);
+				}),
+			};
+		}
+		return currentData;
+	}
+
 	/**
 	 * Sets the variant scaffold data
 	 * @param {ModelVariantType} variantScaffold The variant scaffold data
@@ -50,8 +71,7 @@ export class UmbContentWorkspaceDataManager<
 				} as ModelVariantType,
 				(x) => variantId.compare(x),
 			) as Array<ModelVariantType>;
-			// TODO: I have some trouble with TypeScript here, I does not look like me, but i had to give up. [NL]
-			this._current.update({ variants: newVariants } as any);
+			this.updateCurrent({ variants: newVariants } as unknown as ModelType);
 		} else if (this._varies === false) {
 			// TODO: Beware about segments, in this case we need to also consider segments, if its allowed to vary by segments.
 			const invariantVariantId = UmbVariantId.CreateInvariant();
@@ -65,8 +85,7 @@ export class UmbContentWorkspaceDataManager<
 					...update,
 				} as ModelVariantType,
 			];
-			// TODO: I have some trouble with TypeScript here, I does not look like me, but i had to give up. [NL]
-			this._current.update({ variants: newVariants } as any);
+			this.updateCurrent({ variants: newVariants } as unknown as ModelType);
 		} else {
 			throw new Error('Varies by culture is missing');
 		}

src/Umbraco.Web.UI.Client/src/packages/core/content/manager/element-data-manager.ts

@@ -1,8 +1,12 @@
 import { UmbMergeContentVariantDataController } from '../controller/merge-content-variant-data.controller.js';
 import type { UmbElementDetailModel } from '../types.js';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UmbVariantId, umbVariantObjectCompare } from '@umbraco-cms/backoffice/variant';
 import { UmbEntityWorkspaceDataManager, type UmbWorkspaceDataManager } from '@umbraco-cms/backoffice/workspace';
 
+function valueObjectCompare(a: any, b: any) {
+	return a.alias === b.alias && umbVariantObjectCompare(a, b);
+}
+
 export class UmbElementWorkspaceDataManager<ModelType extends UmbElementDetailModel>
 	extends UmbEntityWorkspaceDataManager<ModelType>
 	implements UmbWorkspaceDataManager<ModelType>
@@ -11,6 +15,27 @@ export class UmbElementWorkspaceDataManager<ModelType extends UmbElementDetailMo
 	//#variesByCulture?: boolean;
 	//#variesBySegment?: boolean;
 
+	protected override _sortCurrentData<GivenType extends Partial<ModelType> = Partial<ModelType>>(
+		persistedData: Partial<ModelType>,
+		currentData: GivenType,
+	): GivenType {
+		currentData = super._sortCurrentData(persistedData, currentData);
+		// Sort the values in the same order as the persisted data:
+		const persistedValues = persistedData.values;
+		if (persistedValues && currentData.values) {
+			return {
+				...currentData,
+				values: [...currentData.values].sort(function (a, b) {
+					return (
+						persistedValues.findIndex((x) => valueObjectCompare(x, a)) -
+						persistedValues.findIndex((x) => valueObjectCompare(x, b))
+					);
+				}),
+			};
+		}
+		return currentData;
+	}
+
 	#updateLock = 0;
 	initiatePropertyValueChange() {
 		this.#updateLock++;
@@ -54,7 +79,7 @@ export class UmbElementWorkspaceDataManager<ModelType extends UmbElementDetailMo
 			variantsToStore = [...selectedVariants, invariantVariantId];
 		}
 
-		const data = this._current.getValue();
+		const data = this.getCurrent();
 		if (!data) throw new Error('Current data is missing');
 		//if (!data.unique) throw new Error('Unique of current data is missing');
 

src/Umbraco.Web.UI.Client/src/packages/core/variant/index.ts

@@ -1,2 +1,3 @@
 export * from './variant-id.class.js';
+export * from './variant-object-compare.function.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/variant/types.ts

@@ -3,6 +3,11 @@ import type { UmbLanguageDetailModel } from '@umbraco-cms/backoffice/language';
 import type { ScheduleRequestModel } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbPropertyValueData } from '@umbraco-cms/backoffice/property';
 
+export type UmbObjectWithVariantProperties = {
+	culture: string | null;
+	segment: string | null;
+};
+
 export interface UmbVariantDataModel {
 	culture: string | null;
 	segment: string | null;

src/Umbraco.Web.UI.Client/src/packages/core/variant/variant-id.class.ts

@@ -1,9 +1,5 @@
 import { UmbDeprecation } from '../utils/index.js';
-
-export type UmbObjectWithVariantProperties = {
-	culture: string | null;
-	segment: string | null;
-};
+import type { UmbObjectWithVariantProperties } from './types.js';
 
 /**
  *

src/Umbraco.Web.UI.Client/src/packages/core/variant/variant-object-compare.function.ts

@@ -0,0 +1,5 @@
+import type { UmbObjectWithVariantProperties } from './types.js';
+
+export function umbVariantObjectCompare(a: UmbObjectWithVariantProperties, b: UmbObjectWithVariantProperties): boolean {
+	return a.culture === b.culture && a.segment === b.segment;
+}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity/entity-workspace-data-manager.ts

@@ -28,6 +28,14 @@ export class UmbEntityWorkspaceDataManager<ModelType>
 	 */
 	public readonly current = this._current.asObservable();
 
+	protected _sortCurrentData<GivenType extends Partial<ModelType> = Partial<ModelType>>(
+		persistedData: Partial<ModelType>,
+		currentData: GivenType,
+	): GivenType {
+		// do nothing.
+		return currentData;
+	}
+
 	/**
 	 * Gets persisted data
 	 * @returns {(ModelType | undefined)}
@@ -81,6 +89,12 @@ export class UmbEntityWorkspaceDataManager<ModelType>
 	 * @memberof UmbSubmittableWorkspaceDataManager
 	 */
 	setCurrent(data: ModelType | undefined) {
+		if (data) {
+			const persistedData = this._persisted.getValue();
+			if (persistedData) {
+				data = this._sortCurrentData(persistedData, data);
+			}
+		}
 		this._current.setValue(data);
 	}
 
@@ -90,6 +104,12 @@ export class UmbEntityWorkspaceDataManager<ModelType>
 	 * @memberof UmbSubmittableWorkspaceDataManager
 	 */
 	updateCurrent(partialData: Partial<ModelType>) {
+		if (partialData) {
+			const persistedData = this._persisted.getValue();
+			if (persistedData) {
+				partialData = this._sortCurrentData(persistedData, partialData);
+			}
+		}
 		this._current.update(partialData);
 	}