fix: move listener on document

NG-ZORRO · Nov 27, 2018 · e207ed4 · e207ed4
1 parent 866cba0
commit e207ed4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts
@@ -8,7 +8,6 @@ import {
   ComponentRef,
   ElementRef,
   EventEmitter,
-  HostListener,
   Inject,
   Injector,
   Input,
@@ -24,7 +23,7 @@ import {
   ViewContainerRef
 } from '@angular/core';
 
-import { Observable, Subject } from 'rxjs';
+import { fromEvent, Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
@@ -111,12 +110,6 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
   @ViewChild('bodyContainer', { read: ViewContainerRef }) bodyContainer: ViewContainerRef;
 
   @Input() @InputBoolean() nzKeyboard: boolean = true;
-  @HostListener('keydown', [ '$event' ])
-  public onKeyDown(event: KeyboardEvent): void {
-    if (event.keyCode === ESCAPE && this.nzKeyboard) {
-      this.onClickOkCancel('cancel');
-    }
-  }
 
   get hidden(): boolean {
     return !this.nzVisible && !this.animationState;
@@ -149,6 +142,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
 
   ngOnInit(): void {
     this.i18n.localeChange.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.locale = this.i18n.getLocaleData('Modal'));
+    fromEvent(this.document.body, 'keydown').pipe(takeUntil(this.unsubscribe$)).subscribe((e: KeyboardEvent) => this.keydownListener(e));
 
     if (this.isComponent(this.nzContent)) {
       this.createDynamicComponent(this.nzContent as Type<T>); // Create component along without View
@@ -205,6 +199,12 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
     });
   }
 
+  keydownListener(event: KeyboardEvent): void {
+    if (event.keyCode === ESCAPE && this.nzKeyboard) {
+      this.onClickOkCancel('cancel');
+    }
+  }
+
   open(): void {
     this.changeVisibleFromInside(true);
   }

diff --git a/components/modal/nz-modal.spec.ts b/components/modal/nz-modal.spec.ts
@@ -194,12 +194,12 @@ describe('modal testing (legacy)', () => {
 
     it('should be closed when clicking ESC', fakeAsync(() => {
       // click 'ESC' key
-      dispatchKeyboardEvent(modalElement, 'keydown', ESCAPE);
+      dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
       fixture.detectChanges();
       expectModalDestroyed(tempModalId, false);
 
       modalInstance.nzKeyboard = true;
-      dispatchKeyboardEvent(modalElement, 'keydown', ESCAPE);
+      dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
       flush();
       fixture.detectChanges();
       expectModalDestroyed(tempModalId, true);