umbDestroyOnDisconnect

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

@@ -3,7 +3,7 @@ import type { UmbBlockListLayoutModel, UmbBlockListValueModel } from '../../type
 import type { UmbBlockListEntryElement } from '../../components/block-list-entry/index.js';
 import { UmbBlockListManagerContext } from '../../context/block-list-manager.context.js';
 import { UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS } from './manifests.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
 import { html, customElement, property, state, repeat, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbPropertyEditorUiElement, UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
@@ -206,7 +206,10 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 					html`<uui-button-inline-create
 							label=${this._createButtonLabel}
 							href=${this._catalogueRouteBuilder?.({ view: 'create', index: index }) ?? ''}></uui-button-inline-create>
-						<umb-block-list-entry .contentUdi=${layoutEntry.contentUdi} .layout=${layoutEntry}>
+						<umb-block-list-entry
+							.contentUdi=${layoutEntry.contentUdi}
+							.layout=${layoutEntry}
+							${umbDestroyOnDisconnect()}>
 						</umb-block-list-entry> `,
 			)}
 			<uui-button-group>

src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/destroy.lit-directive.ts

@@ -0,0 +1,38 @@
+import { AsyncDirective, directive, nothing, type ElementPart } from '@umbraco-cms/backoffice/external/lit';
+
+/**
+ * The `focus` directive sets focus on the given element once its connected to the DOM.
+ */
+class UmbDestroyDirective extends AsyncDirective {
+	#el?: HTMLElement & { destroy: () => void };
+
+	override render() {
+		return nothing;
+	}
+
+	override update(part: ElementPart) {
+		this.#el = part.element as any;
+		return nothing;
+	}
+
+	override disconnected() {
+		if (this.#el) {
+			this.#el.destroy();
+		}
+		this.#el = undefined;
+	}
+
+	//override reconnected() {}
+}
+
+/**
+ * @description
+ * A Lit directive, which destroys the element once its disconnected from the DOM.
+ * @example:
+ * ```js
+ * html`<input ${umbDestroyOnDisconnect()}>`;
+ * ```
+ */
+export const umbDestroyOnDisconnect = directive(UmbDestroyDirective);
+
+//export type { UmbDestroyDirective };

src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/index.ts

@@ -1 +1,2 @@
 export * from './focus.lit-directive.js';
+export * from './destroy.lit-directive.js';