Custom Views: Prevent re-rendering Block Views and Properties

src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.ts

@@ -27,7 +27,8 @@ export class UmbContextConsumer<
 > {
 	protected _retrieveHost: HostElementMethod;
 
-	#raf?: number;
+	#requestRaf?: number;
+	#disconnectRaf?: number;
 	#skipHost?: boolean;
 	#stopAtContextMatch = true;
 	#callback?: UmbContextCallback<ResultType>;
@@ -187,8 +188,8 @@ export class UmbContextConsumer<
 	 * @description Request the context from the host element.
 	 */
 	public request(): void {
-		if (this.#raf !== undefined) {
-			cancelAnimationFrame(this.#raf);
+		if (this.#requestRaf !== undefined) {
+			cancelAnimationFrame(this.#requestRaf);
 		}
 
 		const hostElement = this._retrieveHost();
@@ -208,25 +209,36 @@ export class UmbContextConsumer<
 		(this.#skipHost ? hostElement?.parentNode : hostElement)?.dispatchEvent(event);
 
 		if (this.#promiseResolver && this.#promiseOptions?.preventTimeout !== true) {
-			this.#raf = requestAnimationFrame(() => {
+			this.#requestRaf = requestAnimationFrame(() => {
 				// For unproviding, then setInstance to undefined here. [NL]
 				this.#rejectPromise();
-				this.#raf = undefined;
+				this.#requestRaf = undefined;
 			});
 		}
 	}
 
 	public hostConnected(): void {
+		if (this.#disconnectRaf !== undefined) {
+			cancelAnimationFrame(this.#disconnectRaf);
+			this.#disconnectRaf = undefined;
+		}
 		this.#setupCurrentTarget();
 		this.request();
 	}
 
 	public hostDisconnected(): void {
-		if (this.#raf !== undefined) {
-			cancelAnimationFrame(this.#raf);
-			this.#raf = undefined;
+		if (this.#requestRaf !== undefined) {
+			cancelAnimationFrame(this.#requestRaf);
+			this.#requestRaf = undefined;
+		}
+		if (this.#disconnectRaf !== undefined) {
+			cancelAnimationFrame(this.#disconnectRaf);
 		}
+		this.#disconnectRaf = requestAnimationFrame(this.#handleDisconnect);
+	}
 
+	#handleDisconnect = () => {
+		this.#disconnectRaf = undefined;
 		this.#unprovide();
 		if (this.#promiseRejecter) {
 			const hostElement = this._retrieveHost();
@@ -239,13 +251,13 @@ export class UmbContextConsumer<
 		this.#promiseResolver = undefined;
 		this.#promiseRejecter = undefined;
 
-		this.#dismentalCurrentTarget();
+		this.#dismantleCurrentTarget();
 		this.#currentTarget = window;
-	}
+	};
 
 	#currentTarget: EventTarget = window;
 	#setCurrentTarget(target: EventTarget | undefined) {
-		this.#dismentalCurrentTarget();
+		this.#dismantleCurrentTarget();
 		this.#currentTarget = target ?? window;
 		this.#setupCurrentTarget();
 	}
@@ -256,7 +268,7 @@ export class UmbContextConsumer<
 		this.#currentTarget.addEventListener(UMB_CONTEXT_UNPROVIDED_EVENT_TYPE, this.#onUnprovided);
 	}
 
-	#dismentalCurrentTarget() {
+	#dismantleCurrentTarget() {
 		if (this.#currentTarget) {
 			this.#currentTarget.removeEventListener(UMB_CONTEXT_PROVIDE_EVENT_TYPE, this.#onProvide);
 			this.#currentTarget.removeEventListener(UMB_CONTEXT_UNPROVIDED_EVENT_TYPE, this.#onUnprovided);
@@ -289,7 +301,13 @@ export class UmbContextConsumer<
 	}
 
 	public destroy(): void {
-		this.hostDisconnected();
+		if (this.#requestRaf !== undefined) {
+			cancelAnimationFrame(this.#requestRaf);
+		}
+		if (this.#disconnectRaf !== undefined) {
+			cancelAnimationFrame(this.#disconnectRaf);
+		}
+		this.#handleDisconnect();
 		this._retrieveHost = undefined as any;
 		this.#callback = undefined;
 		this.#promise = undefined;

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

@@ -400,9 +400,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-grid/components/block-grid-entry/block-grid-entry.element.ts

@@ -4,7 +4,7 @@ import { UmbBlockGridEntryContext } from './block-grid-entry.context.js';
 import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { umbDestroyOnDisconnect, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '@umbraco-cms/backoffice/external/uui';
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
@@ -505,10 +505,10 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				class="umb-block-grid__block--view"
 				.config=${this._blockViewProps.config}
 				.content=${this._blockViewProps.content}
-				.settings=${this._blockViewProps.settings}>
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
 			</umb-block-grid-block-unsupported>
 		`;
-		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
 	}
 
 	#renderInlineBlock() {
@@ -521,10 +521,10 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				.unpublished=${!this._exposed}
 				.config=${this._blockViewProps.config}
 				.content=${this._blockViewProps.content}
-				.settings=${this._blockViewProps.settings}>
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
 			</umb-block-grid-block-inline>
 		`;
-		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
 	}
 
 	#renderRefBlock() {
@@ -537,10 +537,10 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				.unpublished=${!this._exposed}
 				.config=${this._blockViewProps.config}
 				.content=${this._blockViewProps.content}
-				.settings=${this._blockViewProps.settings}>
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
 			</umb-block-grid-block>
 		`;
-		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
 	}
 
 	#renderCreateBeforeInlineButton() {
@@ -652,7 +652,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	#renderDeleteAction() {
 		if (this._isReadOnly) return nothing;
 		return html`
-			<uui-button label="delete" look="secondary" @click=${() => this.#context.requestDelete()} title=${this.localize.term('general_delete')}>
+			<uui-button
+				label="delete"
+				look="secondary"
+				@click=${() => this.#context.requestDelete()}
+				title=${this.localize.term('general_delete')}>
 				<uui-icon name="icon-remove"></uui-icon>
 			</uui-button>
 		`;

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

@@ -406,7 +406,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

@@ -90,6 +90,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>;
@@ -272,17 +273,39 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	override connectedCallback(): void {
 		super.connectedCallback();
 		this.#attached = true;
+		// Cancel any pending destruction if we're being reconnected (e.g., during a DOM move/sort)
+		if (this.#disconnectTimeoutId !== undefined) {
+			cancelAnimationFrame(this.#disconnectTimeoutId);
+			this.#disconnectTimeoutId = undefined;
+			// Only skip re-initialization if the controller still exists
+			if (this.#extensionsController) {
+				return;
+			}
+		}
 		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;
 		super.disconnectedCallback();
+		this.#attached = false;
+		// Clear any existing pending frame request (defensive cleanup)
+		if (this.#disconnectTimeoutId !== undefined) {
+			cancelAnimationFrame(this.#disconnectTimeoutId);
+		}
+		// Defer destruction to allow for reconnection during DOM moves/sorting
+		// If reconnected before the next frame, the destruction is cancelled
+		this.#disconnectTimeoutId = requestAnimationFrame(this.#handleDisconnect);
 	}
 
+	#handleDisconnect = () => {
+		this.#disconnectTimeoutId = undefined;
+		// Only destroy if still detached
+		if (!this.#attached) {
+			this.#removeEventListenersFromExtensionElement();
+			this.#extensionsController?.destroy();
+			this.#extensionsController = undefined;
+		}
+	};
+
 	#observeExtensions(): void {
 		if (!this.#attached) return;
 		this.#extensionsController?.destroy();

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

@@ -159,4 +159,105 @@ 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 and reinitializes extension after permanent removal', 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
+			const originalExtensionElement = element.shadowRoot!.firstElementChild;
+			expect(originalExtensionElement).to.be.instanceOf(UmbTestExtensionSlotManifestElement);
+
+			// Permanently remove from DOM
+			container.removeChild(element);
+
+			// Wait for deferred destruction to complete (controller should be destroyed)
+			await sleep(20);
+
+			// Re-add the element to DOM - it should reinitialize with a fresh controller
+			container.appendChild(element);
+			await sleep(20);
+
+			// Extension should be a NEW instance (not the same as before destruction)
+			const newExtensionElement = element.shadowRoot!.firstElementChild;
+			expect(newExtensionElement).to.be.instanceOf(UmbTestExtensionSlotManifestElement);
+			expect(newExtensionElement).to.not.equal(originalExtensionElement);
+		});
+
+		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);
+		});
+	});
 });

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

@@ -101,6 +101,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export class UmbExtensionWithApiSlotElement extends UmbLitElement {
 	#attached = false;
 	#extensionsController?: UmbExtensionsElementAndApiInitializer;
+	#disconnectTimeoutId?: number;
 
 	@state()
 	private _permitted?: Array<UmbExtensionElementAndApiInitializer>;
@@ -337,15 +338,39 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement {
 	override connectedCallback(): void {
 		super.connectedCallback();
 		this.#attached = true;
+		// Cancel any pending destruction if we're being reconnected (e.g., during a DOM move/sort)
+		if (this.#disconnectTimeoutId !== undefined) {
+			cancelAnimationFrame(this.#disconnectTimeoutId);
+			this.#disconnectTimeoutId = undefined;
+			// Only skip re-initialization if the controller still exists
+			if (this.#extensionsController) {
+				return;
+			}
+		}
 		this.#observeExtensions();
 	}
+
 	override disconnectedCallback(): void {
-		this.#attached = false;
-		this.#extensionsController?.destroy();
-		this.#extensionsController = undefined;
 		super.disconnectedCallback();
+		this.#attached = false;
+		// Clear any existing pending frame request (defensive cleanup)
+		if (this.#disconnectTimeoutId !== undefined) {
+			cancelAnimationFrame(this.#disconnectTimeoutId);
+		}
+		// Defer destruction to allow for reconnection during DOM moves/sorting
+		// If reconnected before the next frame, the destruction is cancelled
+		this.#disconnectTimeoutId = requestAnimationFrame(this.#handleDisconnect);
 	}
 
+	#handleDisconnect = () => {
+		this.#disconnectTimeoutId = undefined;
+		// Only destroy if still detached
+		if (!this.#attached) {
+			this.#extensionsController?.destroy();
+			this.#extensionsController = undefined;
+		}
+	};
+
 	#observeExtensions(): void {
 		// We want to be attached before we start observing extensions, cause first at this point we know that we got the right properties. [NL]
 		if (!this.#attached) return;