Skip to content

Commit

Permalink
fix(module:modal): should not close when mousedown in the body (NG-ZO…
Browse files Browse the repository at this point in the history
…RRO#3400)

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

* chore(module:modal): use variable to save classname string

close NG-ZORRO#3394
  • Loading branch information
hsuanxyz authored and Ricbet committed Apr 9, 2020
1 parent fb283fc commit f2c3ff2
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 4 deletions.
2 changes: 2 additions & 0 deletions components/modal/nz-modal.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
></div>
<div
(click)="onClickMask($event)"
(mouseup)="onDialogUp()"
class="ant-modal-wrap {{ nzWrapClassName }}"
[style.zIndex]="nzZIndex"
[style.visibility]="hidden ? 'hidden' : null"
Expand All @@ -18,6 +19,7 @@
>
<div #modalContainer
class="ant-modal {{ nzClassName }}"
(mousedown)="onMaskDialogDown()"
[ngClass]="modalAnimationClassMap"
[ngStyle]="nzStyle"
[style.width]="nzWidth | toCssUnit"
Expand Down
21 changes: 19 additions & 2 deletions components/modal/nz-modal.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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');
}
Expand Down
56 changes: 54 additions & 2 deletions components/modal/nz-modal.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -441,7 +441,7 @@ describe('NzModal', () => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule, NzModalModule],
providers: [NzMeasureScrollbarService],
declarations: [NzDemoModalBasicComponent, ModalByServiceComponent]
declarations: [NzDemoModalBasicComponent, NzDemoModalMaskComponent, ModalByServiceComponent]
});

TestBed.compileComponents();
Expand Down Expand Up @@ -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);
}));
});
});

// -------------------------------------------
Expand All @@ -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">
Expand Down

0 comments on commit f2c3ff2

Please sign in to comment.