From 0fb0990a3dc765a0e99c01875bd2b183c5a9c9b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 10 Apr 2024 21:52:35 +0200
Subject: [PATCH] fix extension-slot life cycle issue

---
 .../extension-slot/extension-slot.element.ts  | 20 ++++++++++---------
 .../extension-with-api-slot.element.ts        | 16 ++++++++-------
 .../entity-action-list.element.ts             |  6 +++---
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts
index 139f7f5345..2e3b3fd37f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts
@@ -43,9 +43,7 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	public set type(value: string | string[] | undefined) {
 		if (value === this.#type) return;
 		this.#type = value;
-		if (this.#attached) {
-			this._observeExtensions();
-		}
+		this.#observeExtensions();
 	}
 	#type?: string | string[] | undefined;
 
@@ -65,9 +63,7 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	public set filter(value: (manifest: any) => boolean) {
 		if (value === this.#filter) return;
 		this.#filter = value;
-		if (this.#attached) {
-			this._observeExtensions();
-		}
+		this.#observeExtensions();
 	}
 	#filter: (manifest: any) => boolean = () => true;
 
@@ -100,11 +96,17 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-		this._observeExtensions();
 		this.#attached = true;
+		this.#observeExtensions();
+	}
+	disconnectedCallback(): void {
+		this.#attached = false;
+		this.#extensionsController?.destroy();
+		super.disconnectedCallback();
 	}
 
-	private _observeExtensions(): void {
+	#observeExtensions(): void {
+		if (!this.#attached) return;
 		this.#extensionsController?.destroy();
 		if (this.#type) {
 			this.#extensionsController = new UmbExtensionsElementInitializer(
@@ -128,7 +130,7 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 					this._permitted,
 					(ext) => ext.alias,
 					(ext) => (this.renderMethod ? this.renderMethod(ext) : ext.component),
-			  )
+				)
 			: html`<slot></slot>`;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.element.ts
index a9ea9b08dd..9bfc2ab033 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.element.ts
@@ -45,9 +45,7 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement {
 	public set type(value: string | string[] | undefined) {
 		if (value === this.#type) return;
 		this.#type = value;
-		if (this.#attached) {
-			this.#observeExtensions();
-		}
+		this.#observeExtensions();
 	}
 	#type?: string | string[] | undefined;
 
@@ -67,9 +65,7 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement {
 	public set filter(value: (manifest: any) => boolean) {
 		if (value === this.#filter) return;
 		this.#filter = value;
-		if (this.#attached) {
-			this.#observeExtensions();
-		}
+		this.#observeExtensions();
 	}
 	#filter: (manifest: any) => boolean = () => true;
 
@@ -147,11 +143,17 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-		this.#observeExtensions();
 		this.#attached = true;
+		this.#observeExtensions();
+	}
+	disconnectedCallback(): void {
+		this.#attached = false;
+		this.#extensionsController?.destroy();
+		super.disconnectedCallback();
 	}
 
 	#observeExtensions(): void {
+		if (!this.#attached) return;
 		this.#extensionsController?.destroy();
 		if (this.#type) {
 			this.#extensionsController = new UmbExtensionsElementAndApiInitializer(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts
index b9c3f9d207..3b06e5b891 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts
@@ -1,5 +1,5 @@
-import { UmbEntityContext } from '@umbraco-cms/backoffice/entity';
 import type { UmbEntityActionArgs } from './types.js';
+import { UmbEntityContext } from '@umbraco-cms/backoffice/entity';
 import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
 import type { ManifestEntityAction, MetaEntityAction } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -17,9 +17,9 @@ export class UmbEntityActionListElement extends UmbLitElement {
 		this.#generateApiArgs();
 		this.requestUpdate('_props');
 		// Update filter:
-		const oldValue = this._filter;
+		//const oldValue = this._filter;
 		this._filter = (extension: ManifestEntityAction<MetaEntityAction>) => extension.forEntityTypes.includes(value);
-		this.requestUpdate('_filter', oldValue);
+		//this.requestUpdate('_filter', oldValue);
 	}
 
 	@state()