Merge remote-tracking branch 'origin/main' into feature/entity-action-kind

src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts

@@ -41,6 +41,7 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 		const oldModals = oldValue.filter((oldModal) => !modals.some((modal) => modal.key === oldModal.key));
 
 		oldModals.forEach((modal) => {
+			// TODO: I would not think this works as expected, the callback method has to be the exact same instance as the one added: [NL]
 			this._modalElementMap.get(modal.key)?.removeEventListener('close-end', this.#onCloseEnd.bind(this, modal.key));
 			this._modalElementMap.delete(modal.key);
 		});
@@ -57,6 +58,7 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 			modalElement.modalContext = modal;
 
 			modalElement.element?.addEventListener('close-end', this.#onCloseEnd.bind(this, modal.key));
+			modal.addEventListener('umb:destroy', this.#onCloseEnd.bind(this, modal.key));
 
 			this._modalElementMap.set(modal.key, modalElement);
 			this.requestUpdate();

src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts

@@ -26,6 +26,7 @@ export class UmbModalElement extends UmbLitElement {
 		return this.#modalContext;
 	}
 	public set modalContext(value: UmbModalContext | undefined) {
+		if (this.#modalContext === value) return;
 		this.#modalContext = value;
 
 		if (!value) {
@@ -51,6 +52,7 @@ export class UmbModalElement extends UmbLitElement {
 	#createModalElement() {
 		if (!this.#modalContext) return;
 
+		this.#modalContext.addEventListener('umb:destroy', this.#onContextDestroy);
 		this.element = this.#createContainerElement();
 
 		// Makes sure that the modal triggers the reject of the context promise when it is closed by pressing escape.
@@ -136,9 +138,13 @@ export class UmbModalElement extends UmbLitElement {
 		// TODO: add inner fallback element if no extension element is found
 		const innerElement = await createExtensionElement(manifest);
 
+		if (!this.#modalContext) {
+			// If context does not exist any more, it means we have been destroyed. So we need to back out:
+			return undefined;
+		}
 		if (innerElement) {
 			innerElement.manifest = manifest;
-			innerElement.data = this.#modalContext!.data;
+			innerElement.data = this.#modalContext.data;
 			innerElement.modalContext = this.#modalContext;
 		}
 
@@ -167,10 +173,19 @@ export class UmbModalElement extends UmbLitElement {
 		this.destroy();
 	}
 
+	#onContextDestroy = () => {
+		this.destroy();
+	};
+
 	destroy() {
 		this.#innerElement.complete();
 		this.#modalExtensionObserver?.destroy();
 		this.#modalExtensionObserver = undefined;
+		if (this.#modalContext) {
+			this.#modalContext.removeEventListener('umb:destroy', this.#onContextDestroy);
+			this.#modalContext.destroy();
+			this.#modalContext = undefined;
+		}
 		super.destroy();
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts

@@ -132,6 +132,7 @@ export class UmbModalContext<ModalPreset extends object = object, ModalValue = a
 	}
 
 	public destroy(): void {
+		this.dispatchEvent(new CustomEvent('umb:destroy'));
 		this.#value.destroy();
 		(this as any).router = null;
 		(this as any).data = undefined;

src/Umbraco.Web.UI.Client/src/packages/core/modal/index.ts

@@ -5,6 +5,6 @@ export * from './route-registration/modal-route-registration.js';
 export * from './route-registration/modal-route-registration.controller.js';
 export * from './token/index.js';
 export * from './types.js';
-export * from './component/modal-element.element.js';
+export * from './component/modal-base.element.js';
 export * from './component/modal.element.js';
 export * from './common/confirm/confirm-modal.controller.js';