Merge pull request #1600 from abpframework/fix/modal-click-listening

fix(theme-shared): modal component click listening

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html

@@ -1,5 +1,6 @@
 <div
   *ngIf="showModal"
+  (click)="onClickBackdrop()"
   id="abp-modal"
   tabindex="-1"
   class="modal fade {{ modalClass }} d-block show"
@@ -11,7 +12,7 @@
     [class.modal-dialog-centered]="centered"
     #abpModalContent
   >
-    <div #content id="abp-modal-content" class="modal-content">
+    <div #content id="abp-modal-content" class="modal-content" (click)="$event.stopPropagation()">
       <div id="abp-modal-header" class="modal-header">
         <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
 

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -108,25 +108,6 @@ export class ModalComponent implements OnDestroy {
   }
 
   listen() {
-    fromEvent(document, 'click')
-      .pipe(
-        debounceTime(100),
-        takeUntil(this.destroy$),
-        filter((event: MouseEvent) => {
-          const isOpenConfirmation = this.isOpenConfirmation || document.querySelector('p-toastitem');
-          return (
-            event &&
-            this.closable &&
-            this.modalContent &&
-            !isOpenConfirmation &&
-            !this.modalContent.nativeElement.contains(event.target)
-          );
-        }),
-      )
-      .subscribe(_ => {
-        this.close();
-      });
-
     fromEvent(document, 'keyup')
       .pipe(
         takeUntil(this.destroy$),
@@ -175,6 +156,10 @@ export class ModalComponent implements OnDestroy {
       this.visible = false;
     }
   }
+
+  onClickBackdrop() {
+    this.close();
+  }
 }
 
 function getFlatNodes(nodes: NodeList): HTMLElement[] {