Custom Views: Prevent re-rendering Block Views and Properties

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

@@ -389,9 +389,9 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
 				${repeat(
 					this._layoutEntries,
-					(layout, index) => `${index}_${layout.contentKey}`,
-					(layout, index) => html`
-						<umb-block-grid-entry
+					(layout) => layout.contentKey,
+					(layout, index) =>
+						html`<umb-block-grid-entry
 							class="umb-block-grid__layout-item"
 							index=${index}
 							.contentKey=${layout.contentKey}

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -388,7 +388,7 @@ export class UmbPropertyEditorUIBlockListElement
 			${this.#renderSortModeToolbar()}
 			${repeat(
 				this._layouts,
-				(layout, index) => `${index}_${layout.contentKey}`,
+				(layout) => layout.contentKey,
 				(layout, index) => html`
 					${this.#renderInlineCreateButton(index)}
 					<umb-block-list-entry

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts

@@ -22,6 +22,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export class UmbExtensionSlotElement extends UmbLitElement {
 	#attached = false;
 	#extensionsController?: UmbExtensionsElementInitializer | UmbExtensionElementInitializer;
+	#disconnectTimeoutId?: number;
 
 	@state()
 	private _permitted?: Array<UmbExtensionElementInitializer>;
@@ -120,15 +121,36 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 
 	override connectedCallback(): void {
 		super.connectedCallback();
+		// Cancel any pending destruction if we're being reconnected (e.g., during a DOM move/sort)
+		if (this.#disconnectTimeoutId !== undefined) {
+			clearTimeout(this.#disconnectTimeoutId);
+			this.#disconnectTimeoutId = undefined;
+			// Only skip re-initialization if the controller still exists
+			if (this.#extensionsController) {
+				this.#attached = true;
+				return;
+			}
+		}
 		this.#attached = true;
 		this.#observeExtensions();
 	}
 	override disconnectedCallback(): void {
-		// _permitted is reset as the extensionsController fires a callback on destroy.
-		this.#removeEventListenersFromExtensionElement();
 		this.#attached = false;
-		this.#extensionsController?.destroy();
-		this.#extensionsController = undefined;
+		// Clear any existing pending timeout (defensive cleanup)
+		if (this.#disconnectTimeoutId !== undefined) {
+			clearTimeout(this.#disconnectTimeoutId);
+		}
+		// Defer destruction to allow for reconnection during DOM moves/sorting
+		// If reconnected before the timeout, the destruction is cancelled
+		this.#disconnectTimeoutId = setTimeout(() => {
+			this.#disconnectTimeoutId = undefined;
+			// Only destroy if still detached
+			if (!this.#attached) {
+				this.#removeEventListenersFromExtensionElement();
+				this.#extensionsController?.destroy();
+				this.#extensionsController = undefined;
+			}
+		}, 0) as unknown as number;
 		super.disconnectedCallback();
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.test.ts

@@ -159,4 +159,99 @@ describe('UmbExtensionSlotElement', () => {
 			expect(element.shadowRoot!.childElementCount).to.be.equal(1);
 		});
 	});
+
+	describe('deferred destruction pattern', () => {
+		beforeEach(async () => {
+			umbExtensionsRegistry.register({
+				type: 'dashboard',
+				alias: 'unit-test-ext-slot-deferred-manifest',
+				name: 'unit-test-deferred-extension',
+				elementName: 'umb-test-extension-slot-manifest-element',
+				weight: 200,
+				meta: {
+					pathname: 'test/test',
+				},
+			});
+		});
+
+		afterEach(async () => {
+			umbExtensionsRegistry.unregister('unit-test-ext-slot-deferred-manifest');
+		});
+
+		it('preserves extension when moved in DOM (simulating drag-and-drop)', async () => {
+			const container = await fixture(html`<div></div>`) as HTMLDivElement;
+			element = document.createElement('umb-extension-slot') as UmbExtensionSlotElement;
+			element.type = 'dashboard';
+			element.filter = (x: ManifestDashboard) => x.alias === 'unit-test-ext-slot-deferred-manifest';
+
+			container.appendChild(element);
+			await sleep(20);
+
+			// Get reference to the rendered extension element
+			const originalExtensionElement = element.shadowRoot!.firstElementChild;
+			expect(originalExtensionElement).to.be.instanceOf(UmbTestExtensionSlotManifestElement);
+
+			// Simulate DOM move: remove and immediately re-add (like during sorting)
+			container.removeChild(element);
+			container.appendChild(element);
+
+			// Wait for the deferred timeout to pass
+			await sleep(20);
+
+			// Extension should still exist and be the same instance (not recreated)
+			const extensionAfterMove = element.shadowRoot!.firstElementChild;
+			expect(extensionAfterMove).to.be.instanceOf(UmbTestExtensionSlotManifestElement);
+			expect(extensionAfterMove).to.equal(originalExtensionElement);
+		});
+
+		it('properly destroys extension when permanently removed from DOM', async () => {
+			const container = await fixture(html`<div></div>`) as HTMLDivElement;
+			element = document.createElement('umb-extension-slot') as UmbExtensionSlotElement;
+			element.type = 'dashboard';
+			element.filter = (x: ManifestDashboard) => x.alias === 'unit-test-ext-slot-deferred-manifest';
+
+			container.appendChild(element);
+			await sleep(20);
+
+			// Verify extension is rendered
+			expect(element.shadowRoot!.firstElementChild).to.be.instanceOf(UmbTestExtensionSlotManifestElement);
+
+			// Permanently remove from DOM
+			container.removeChild(element);
+
+			// Wait for deferred destruction to complete
+			await sleep(20);
+
+			// Extension should be destroyed (shadowRoot children cleared due to controller destruction)
+			// The element's internal state should be cleaned up
+			expect(element.shadowRoot!.childElementCount).to.equal(0);
+		});
+
+		it('cancels pending destruction timeout when reconnected', async () => {
+			const container = await fixture(html`<div></div>`) as HTMLDivElement;
+			element = document.createElement('umb-extension-slot') as UmbExtensionSlotElement;
+			element.type = 'dashboard';
+			element.filter = (x: ManifestDashboard) => x.alias === 'unit-test-ext-slot-deferred-manifest';
+
+			container.appendChild(element);
+			await sleep(20);
+
+			const originalExtensionElement = element.shadowRoot!.firstElementChild;
+			expect(originalExtensionElement).to.be.instanceOf(UmbTestExtensionSlotManifestElement);
+
+			// Disconnect (starts destruction timeout)
+			container.removeChild(element);
+
+			// Immediately reconnect (should cancel the destruction timeout)
+			container.appendChild(element);
+
+			// Wait longer than the timeout would need
+			await sleep(20);
+
+			// Extension should still exist and be the same instance
+			const extensionAfterReconnect = element.shadowRoot!.firstElementChild;
+			expect(extensionAfterReconnect).to.be.instanceOf(UmbTestExtensionSlotManifestElement);
+			expect(extensionAfterReconnect).to.equal(originalExtensionElement);
+		});
+	});
 });