Merge pull request #2533 from Akshat55/issue.2530

fix: Emit close event on Escape

Author: Akshat55

src/modal/base-modal.service.ts

@@ -52,7 +52,7 @@ export class BaseModalService {
 				component.instance.open = false;
 			}),
 			// delay closing by an arbitrary amount to allow the animation to finish
-			delay(150)
+			delay(240)
 		).subscribe(() => {
 			this.placeholderService.destroyComponent(component);
 			// filter out our component
@@ -82,8 +82,11 @@ export class BaseModalService {
 			index = BaseModalService.modalList.length - 1;
 		}
 
-		this.placeholderService.destroyComponent(BaseModalService.modalList[index]);
-		BaseModalService.modalList.splice(index, 1);
+		// Let animation finish before component is removed
+		setTimeout(() => {
+			this.placeholderService.destroyComponent(BaseModalService.modalList[index]);
+			BaseModalService.modalList.splice(index, 1);
+		}, 240);
 	}
 }
 

src/modal/modal.component.ts

@@ -196,8 +196,10 @@ export class Modal implements AfterViewInit, OnChanges, OnDestroy {
 		switch (event.key) {
 			case "Escape": {
 				event.stopImmediatePropagation();  // prevents events being fired for multiple modals if more than 2 open
-				this.modalService.destroy();  // destroy top (latest) modal
+				// Manually close modal
+				this.open = false;
 				this.close.emit();
+				this.modalService.destroy();  // destroy top (latest) modal
 				break;
 			}