From acd90e49ca275fb2e07206abdec833de5d3979ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <jmj@umbraco.dk>
Date: Tue, 2 Aug 2022 14:46:46 +0200
Subject: [PATCH] Refactor and closing by pressing Escape now works

---
 .../property-editor-content-picker.element.ts       |  4 ++--
 .../src/core/services/modal.service.ts              | 13 ++-----------
 .../src/core/services/modalHandler.ts               | 13 ++++++++-----
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts
index d0615415ac..2ce22c1c48 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts
@@ -44,8 +44,8 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
 
 	private _open() {
 		const modalHandler = this._modalService?.openSidebar('umb-modal-content-picker');
-		modalHandler?.onClose().then((result) => {
-			console.log('result', result);
+		modalHandler?.onClose.then(() => {
+			console.log('Closed the modal for:', this);
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts
index 73525ce0ec..cc8f7dff33 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts
@@ -5,10 +5,6 @@ export class UmbModalService {
 	private _modals: BehaviorSubject<Array<UmbModalHandler>> = new BehaviorSubject(<Array<UmbModalHandler>>[]);
 	public readonly modals: Observable<Array<UmbModalHandler>> = this._modals.asObservable();
 
-	// public createModal(modalHandler: UmbModalHandler): void {
-	// 	this._modals.next([...this._modals.getValue(), modalHandler]);
-	// }
-
 	public openSidebar(elementName: string): UmbModalHandler {
 		return this._open(elementName, 'uui-modal-sidebar');
 	}
@@ -19,17 +15,12 @@ export class UmbModalService {
 
 	private _open(elementName: string, modalElementName: string): UmbModalHandler {
 		const modalHandler = new UmbModalHandler(elementName, modalElementName);
-		modalHandler.onClose().then(() => this._close(modalHandler));
+		modalHandler.onClose.then(() => this._close(modalHandler));
 		this._modals.next([...this._modals.getValue(), modalHandler]);
 		return modalHandler;
 	}
 
 	private _close(modalHandler: UmbModalHandler) {
-		console.log('close', modalHandler);
-		//TODO clicking escape doesn't trigger the cleanup
-		modalHandler.modal.close();
-		modalHandler.modal.addEventListener('close-end', () =>
-			this._modals.next(this._modals.getValue().filter((modal) => modal.key !== modalHandler.key))
-		);
+		this._modals.next(this._modals.getValue().filter((modal) => modal.key !== modalHandler.key));
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts b/src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts
index 5e4539643f..028d3f1d5a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts
@@ -11,24 +11,27 @@ export default class UmbModalHandler {
 		this.key = Date.now().toString(); //TODO better key
 		this._elementName = elementName;
 		this._createLayoutElement(modalElementName);
-		this._closePromise = new Promise((res) => {
-			this._closeResolver = res;
+		this._closePromise = new Promise((resolve) => {
+			this._closeResolver = resolve;
 		});
 	}
 
 	private _createLayoutElement(modalElementName: string) {
 		this.modal = document.createElement(modalElementName);
+		this.modal.addEventListener('close-end', () => {
+			this._closeResolver();
+		});
 		this.modal.size = 'small'; //TODO make meta object for settings
 		this.element = document.createElement(this._elementName);
 		this.modal.appendChild(this.element);
 		this.element.modalHandler = this;
 	}
 
-	public close(...args: any) {
-		this._closeResolver(...args);
+	public close() {
+		this.modal.close();
 	}
 
-	public onClose(): Promise<any> {
+	public get onClose(): Promise<any> {
 		return this._closePromise;
 	}
 }