MemberGroupPicker: fixes sorting

src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts

@@ -6,26 +6,24 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { MemberItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
-import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-
-const SORTER_CONFIG: UmbSorterConfig<string> = {
-	getUniqueOfElement: (element) => {
-		return element.getAttribute('detail');
-	},
-	getUniqueOfModel: (modelEntry) => {
-		return modelEntry;
-	},
-	identifier: 'Umb.SorterIdentifier.InputMemberGroup',
-	itemSelector: 'uui-ref-node',
-	containerSelector: 'uui-ref-list',
-};
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 @customElement('umb-input-member-group')
 export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElement, '') {
-	#sorter = new UmbSorterController(this, {
-		...SORTER_CONFIG,
+	#sorter = new UmbSorterController<string>(this, {
+		getUniqueOfElement: (element) => {
+			return element.id;
+		},
+		getUniqueOfModel: (modelEntry) => {
+			return modelEntry;
+		},
+		identifier: 'Umb.SorterIdentifier.InputMemberGroup',
+		itemSelector: 'uui-ref-node',
+		containerSelector: 'uui-ref-list',
 		onChange: ({ model }) => {
 			this.selection = model;
+			this.dispatchEvent(new UmbChangeEvent());
 		},
 	});
 
@@ -197,7 +195,7 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
 		// TODO: get the correct variant name
 		const name = item.name;
 		return html`
-			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.unique)}>
+			<uui-ref-node name=${item.name} id=${item.unique}>
 				<uui-action-bar slot="actions">
 					${this.#renderOpenButton(item)}
 					<uui-button