fix(module:modal): should not close when mousedown in the body (#3400)

* fix(module:modal): should not close when mousedown in the body * chore(module:modal): use variable to save classname string close #3394
NG-ZORRO · May 17, 2019 · 82e488a · 82e488a
1 parent 3742eda
commit 82e488a
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 4 deletions.
diff --git a/components/modal/nz-modal.component.html b/components/modal/nz-modal.component.html
@@ -10,6 +10,7 @@
   ></div>
   <div
     (click)="onClickMask($event)"
+    (mouseup)="onDialogUp()"
     class="ant-modal-wrap {{ nzWrapClassName }}"
     [style.zIndex]="nzZIndex"
     [style.visibility]="hidden ? 'hidden' : null"
@@ -18,6 +19,7 @@
   >
     <div #modalContainer
       class="ant-modal {{ nzClassName }}"
+      (mousedown)="onMaskDialogDown()"
       [ngClass]="modalAnimationClassMap"
       [ngStyle]="nzStyle"
       [style.width]="nzWidth | toCssUnit"

diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts
@@ -49,6 +49,7 @@ import { ModalButtonOptions, ModalOptions, ModalType, OnClickCallback } from './
 export const MODAL_ANIMATE_DURATION = 200; // Duration when perform animations (ms)
 
 type AnimationState = 'enter' | 'leave' | null;
+export const WRAP_CLASS_NAME = 'ant-modal-wrap';
 
 @Component({
   selector: 'nz-modal',
@@ -169,6 +170,8 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R>
   private focusTrap: FocusTrap;
   private scrollStrategy: BlockScrollStrategy;
   private overlayRef: OverlayRef;
+  private dialogMouseDown = false;
+  private timeoutId: number;
 
   [key: string]: any; // tslint:disable-line:no-any
 
@@ -260,6 +263,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R>
       this.unsubscribe$.next();
       this.unsubscribe$.complete();
     });
+    clearTimeout(this.timeoutId);
   }
 
   setOverlayRef(overlayRef: OverlayRef): void {
@@ -309,12 +313,25 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R>
     return this.elementRef && this.elementRef.nativeElement;
   }
 
+  onMaskDialogDown(): void {
+    this.dialogMouseDown = true;
+  }
+
+  onDialogUp(): void {
+    if (this.dialogMouseDown) {
+      this.timeoutId = setTimeout(() => {
+        this.dialogMouseDown = false;
+      }, 0);
+    }
+  }
+
   onClickMask($event: MouseEvent): void {
     if (
       this.mask &&
       this.maskClosable &&
-      ($event.target as HTMLElement).classList.contains('ant-modal-wrap') &&
-      this.nzVisible
+      ($event.target as HTMLElement).classList.contains(WRAP_CLASS_NAME) &&
+      this.nzVisible &&
+      !this.dialogMouseDown
     ) {
       this.onClickOkCancel('cancel');
     }

diff --git a/components/modal/nz-modal.spec.ts b/components/modal/nz-modal.spec.ts
@@ -9,7 +9,7 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { NzButtonComponent, NzButtonModule } from 'ng-zorro-antd/button';
-import { dispatchKeyboardEvent, NzMeasureScrollbarService } from 'ng-zorro-antd/core';
+import { dispatchFakeEvent, dispatchKeyboardEvent, NzMeasureScrollbarService } from 'ng-zorro-antd/core';
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 import en_US from '../i18n/languages/en_US';
@@ -441,7 +441,7 @@ describe('NzModal', () => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule, NzModalModule],
       providers: [NzMeasureScrollbarService],
-      declarations: [NzDemoModalBasicComponent, ModalByServiceComponent]
+      declarations: [NzDemoModalBasicComponent, NzDemoModalMaskComponent, ModalByServiceComponent]
     });
 
     TestBed.compileComponents();
@@ -672,6 +672,44 @@ describe('NzModal', () => {
       document.body.removeChild(forceScrollElement);
     }));
   });
+
+  describe('close with mask', () => {
+    let fixture: ComponentFixture<NzDemoModalMaskComponent>;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzDemoModalMaskComponent);
+    });
+
+    it('should close when mask click', fakeAsync(() => {
+      fixture.componentInstance.isVisible = true;
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      const nativeElement = fixture.debugElement.query(By.css('.ant-modal-wrap')).nativeElement;
+      fixture.detectChanges();
+      nativeElement!.click();
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      expectModalHidden(fixture.debugElement.query(By.css('nz-modal')).nativeElement, true);
+    }));
+
+    it('should not close if mouse down in dialog', fakeAsync(() => {
+      fixture.componentInstance.isVisible = true;
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      const bodyNativeElement = fixture.debugElement.query(By.css('.ant-modal-body')).nativeElement;
+      dispatchFakeEvent(bodyNativeElement, 'mousedown');
+      fixture.detectChanges();
+      const warpNativeElement = fixture.debugElement.query(By.css('.ant-modal-wrap')).nativeElement;
+      dispatchFakeEvent(warpNativeElement, 'mouseup');
+      dispatchFakeEvent(warpNativeElement, 'click');
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      expectModalHidden(fixture.debugElement.query(By.css('nz-modal')).nativeElement, false);
+    }));
+  });
 });
 
 // -------------------------------------------
@@ -689,6 +727,20 @@ class NzDemoModalBasicComponent {
   modalAvailable = true;
 }
 
+@Component({
+  template: `
+    <nz-modal [(nzVisible)]="isVisible" (nzOnCancel)="handleCancel()">
+      <p>content</p>
+    </nz-modal>
+  `
+})
+class NzDemoModalMaskComponent {
+  isVisible = false;
+  handleCancel(): void {
+    this.isVisible = false;
+  }
+}
+
 @Component({
   template: `
     <nz-modal *ngIf="modalAvailable" [nzMask]="nzMask">