temp event solution until UUI modal event is ready

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

@@ -48,14 +48,19 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 			const modalElement = new UmbModalElement();
 			modalElement.modalContext = modal;
 
+			// TODO: We need to change this to the close-end event, when it is added to UUI again.
+			// This solution solves the memory leak issue where the modal contexts where not removed from the manager when they are closed.
+			// It breaks the modal animation though, so we need to wait for the close-end so we are sure the animation is done.
+			modalElement.element?.addEventListener('close', () => this._modalManagerContext?.remove(modal.key));
+
 			this._modalElementMap.set(modal.key, modalElement);
 		});
 	}
 
 	#renderModal(key: string) {
-		const element = this._modalElementMap.get(key);
-		if (!element) return;
-		return html`${element.render()}`;
+		const modalElement = this._modalElementMap.get(key);
+		if (!modalElement) return;
+		return html`${modalElement.render()}`;
 	}
 
 	render() {

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

@@ -27,7 +27,7 @@ export class UmbModalElement extends UmbLitElement {
 		this.#createModalElement();
 	}
 
-	public modalElement?: UUIModalDialogElement | UUIModalSidebarElement;
+	public element?: UUIModalDialogElement | UUIModalSidebarElement;
 
 	#innerElement = new BehaviorSubject<HTMLElement | undefined>(undefined);
 
@@ -37,14 +37,14 @@ export class UmbModalElement extends UmbLitElement {
 	#createModalElement() {
 		if (!this.#modalContext) return;
 
-		this.modalElement = this.#createContainerElement();
+		this.element = this.#createContainerElement();
 
 		this.#modalContext.onSubmit().then(
 			() => {
-				this.modalElement?.close();
+				this.element?.close();
 			},
 			() => {
-				this.modalElement?.close();
+				this.element?.close();
 			},
 		);
 
@@ -63,10 +63,10 @@ export class UmbModalElement extends UmbLitElement {
 			this.#modalRouterElement.parent = this.#modalContext.router;
 		}
 
-		this.modalElement.appendChild(this.#modalRouterElement);
+		this.element.appendChild(this.#modalRouterElement);
 		this.#observeModal(this.#modalContext.alias.toString());
 
-		const provider = new UmbContextProvider(this.modalElement, UMB_MODAL_CONTEXT_TOKEN, this.#modalContext);
+		const provider = new UmbContextProvider(this.element, UMB_MODAL_CONTEXT_TOKEN, this.#modalContext);
 		provider.hostConnected();
 	}
 
@@ -129,7 +129,7 @@ export class UmbModalElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`${this.modalElement}`;
+		return html`${this.element}`;
 	}
 
 	#destroy() {