From 49eff2bd2dc9ef84177086d07f032f54aba87d87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 12 Jan 2024 13:46:24 +0100
Subject: [PATCH] test material

---
 .../examples/sorter-with-two-containers/sorter-group.ts       | 2 +-
 .../examples/sorter-with-two-containers/sorter-item.ts        | 3 ++-
 .../src/packages/core/sorter/sorter.controller.ts             | 4 +++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
index 04d64ee479..1db8013490 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
@@ -74,7 +74,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			<div class="sorter-container">
 				${repeat(
 					this._items,
-					(item) => item.name,
+					(item) => item,
 					(item) =>
 						html`<example-sorter-item name=${item.name}>
 							<button @click=${() => this.removeItem(item)}>Delete</button>
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts
index d9d9c81aa7..2f22b1c4c4 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts
@@ -14,6 +14,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
 	render() {
 		return html`
 			${this.name}
+			<img src="https://picsum.photos/seed/${this.name}/5000/5000" style="width:250px;" />
 			<slot></slot>
 		`;
 	}
@@ -30,7 +31,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
 				border-radius: var(--uui-border-radius);
 				margin-bottom: 3px;
 			}
-			:host[drag-placeholder] {
+			:host([drag-placeholder]) {
 				opacity: 0.2;
 			}
 		`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
index 5fcc94a136..50ae7b19ee 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
@@ -147,7 +147,9 @@ export class UmbSorterController<T extends object> implements UmbController {
 
 		// Set defaults:
 		config.ignorerSelector ??= 'a, img, iframe';
-		config.placeholderAttr ??= 'drag-placeholder';
+		if (!config.placeholderClass && !config.placeholderAttr) {
+			config.placeholderAttr = 'drag-placeholder';
+		}
 
 		this.#config = config as INTERNAL_UmbSorterConfig<T>;
 		host.addController(this);