refactor(module:all): remove the backdrop of most components

Related components: autocomplete, cascader, datepicker, timepicker, mention, popconfirm, popover, tooltip, select, treeselect close NG-ZORRO#4763 close NG-ZORRO#5061 close NG-ZORRO#4259 close NG-ZORRO#2508
wenqi73 · Oct 21, 2020 · 39a39e3 · 39a39e3
1 parent 5dc1ff3
commit 39a39e3
Show file tree

Hide file tree

Showing 25 changed files with 122 additions and 110 deletions.
diff --git a/components/auto-complete/autocomplete-trigger.directive.ts b/components/auto-complete/autocomplete-trigger.directive.ts
@@ -19,8 +19,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 import { NzInputGroupWhitSuffixOrPrefixDirective } from 'ng-zorro-antd/input';
 
-import { fromEvent, merge, Subject, Subscription } from 'rxjs';
-import { delay, takeUntil, tap } from 'rxjs/operators';
+import { merge, Subscription } from 'rxjs';
+import { delay, filter, tap } from 'rxjs/operators';
 
 import { NzAutocompleteOptionComponent } from './autocomplete-option.component';
 import { NzAutocompleteComponent } from './autocomplete.component';
@@ -67,14 +67,13 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     }
   }
 
-  private destroy$ = new Subject<void>();
   private overlayRef: OverlayRef | null = null;
   private portal: TemplatePortal<{}> | null = null;
   private positionStrategy!: FlexibleConnectedPositionStrategy;
   private previousValue: string | number | null = null;
   private selectionChangeSubscription!: Subscription;
   private optionsChangeSubscription!: Subscription;
-  private overlayBackdropClickSubscription!: Subscription;
+  private overlayOutsideClickSubscription!: Subscription;
 
   constructor(
     private elementRef: ElementRef,
@@ -118,7 +117,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
 
       if (this.overlayRef && this.overlayRef.hasAttached()) {
         this.selectionChangeSubscription.unsubscribe();
-        this.overlayBackdropClickSubscription.unsubscribe();
+        this.overlayOutsideClickSubscription.unsubscribe();
         this.optionsChangeSubscription.unsubscribe();
         this.overlayRef.dispose();
         this.overlayRef = null;
@@ -214,21 +213,11 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     });
   }
 
-  /**
-   * Subscription external click and close panel
-   */
-  private subscribeOverlayBackdropClick(): Subscription {
-    return merge<MouseEvent | TouchEvent>(
-      fromEvent<MouseEvent>(this.document, 'click'),
-      fromEvent<TouchEvent>(this.document, 'touchend')
-    ).subscribe((event: MouseEvent | TouchEvent) => {
-      const clickTarget = event.target as HTMLElement;
-
-      // Make sure is not self
-      if (clickTarget !== this.elementRef.nativeElement && !this.overlayRef!.overlayElement.contains(clickTarget) && this.panelOpen) {
-        this.closePanel();
-      }
-    });
+  private subscribeOverlayOutsideClick(): Subscription {
+    return merge(
+      this.overlayRef!.outsidePointerEvents().pipe(filter((e: MouseEvent) => !this.elementRef.nativeElement.contains(e.target))),
+      this.overlayRef!.detachments()
+    ).subscribe(() => this.closePanel());
   }
 
   private attachOverlay(): void {
@@ -247,14 +236,8 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     if (this.overlayRef && !this.overlayRef.hasAttached()) {
       this.overlayRef.attach(this.portal);
       this.selectionChangeSubscription = this.subscribeSelectionChange();
-      this.overlayBackdropClickSubscription = this.subscribeOverlayBackdropClick();
       this.optionsChangeSubscription = this.subscribeOptionsChange();
-      this.overlayRef
-        .detachments()
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(() => {
-          this.closePanel();
-        });
+      this.overlayOutsideClickSubscription = this.subscribeOverlayOutsideClick();
     }
     this.nzAutocomplete.isOpen = this.panelOpen = true;
   }

diff --git a/components/auto-complete/autocomplete.spec.ts b/components/auto-complete/autocomplete.spec.ts
@@ -154,7 +154,7 @@ describe('auto-complete', () => {
 
       expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
 
-      dispatchFakeEvent(document, 'click');
+      dispatchFakeEvent(document.body, 'click');
 
       expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
     }));

diff --git a/components/cascader/cascader.component.ts b/components/cascader/cascader.component.ts
@@ -111,13 +111,12 @@ const defaultDisplayRender = (labels: string[]) => labels.join(' / ');
     <ng-template
       cdkConnectedOverlay
       nzConnectedOverlay
-      cdkConnectedOverlayHasBackdrop
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayPositions]="positions"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-cascader-menus'"
-      (backdropClick)="closeMenu()"
-      (detach)="closeMenu()"
       [cdkConnectedOverlayOpen]="menuVisible"
+      (overlayOutsideClick)="onClickOutside($event)"
+      (detach)="closeMenu()"
     >
       <div
         #menu
@@ -310,9 +309,9 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
 
   constructor(
     public cascaderService: NzCascaderService,
-    private i18nService: NzI18nService,
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
+    private i18nService: NzI18nService,
     elementRef: ElementRef,
     renderer: Renderer2,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
@@ -587,6 +586,12 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
       : this.cascaderService.setOptionActivated(option, columnIndex, true);
   }
 
+  onClickOutside(event: MouseEvent): void {
+    if (!this.el.contains(event.target as Node)) {
+      this.closeMenu();
+    }
+  }
+
   private isActionTrigger(action: 'click' | 'hover'): boolean {
     return typeof this.nzTriggerAction === 'string' ? this.nzTriggerAction === action : this.nzTriggerAction.indexOf(action) !== -1;
   }

diff --git a/components/cascader/style/patch.less b/components/cascader/style/patch.less
@@ -1,3 +1,5 @@
 .ant-cascader-menus {
   position: relative;
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -66,7 +66,7 @@ describe('NzDatePickerComponent', () => {
       openPickerByClickTrigger();
       expect(getPickerContainer()).not.toBeNull();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -92,7 +92,7 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       openPickerByClickTrigger();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -242,7 +242,6 @@ describe('NzDatePickerComponent', () => {
       tick(500);
       fixture.detectChanges();
       expect(getPickerContainer()).not.toBeNull();
-      expect(queryFromOverlay('.cdk-overlay-backdrop')).toBeNull();
 
       fixtureInstance.nzOpen = false;
       fixture.detectChanges();
@@ -362,7 +361,7 @@ describe('NzDatePickerComponent', () => {
       openPickerByClickTrigger();
       expect(nzOnOpenChange).toHaveBeenCalledWith(true);
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       flush();
       expect(nzOnOpenChange).toHaveBeenCalledWith(false);
@@ -776,7 +775,7 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       expect(getPickerContainer()).not.toBeNull();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();

diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts
@@ -56,7 +56,7 @@ describe('NzMonthPickerComponent', () => {
       openPickerByClickTrigger();
       expect(getPickerContainer()).not.toBeNull();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -127,7 +127,6 @@ describe('NzMonthPickerComponent', () => {
         tick(500);
         fixture.detectChanges();
         expect(getPickerContainer()).not.toBeNull();
-        expect(queryFromOverlay('.cdk-overlay-backdrop')).toBeNull();
 
         fixtureInstance.nzOpen = false;
         fixture.detectChanges();
@@ -206,7 +205,7 @@ describe('NzMonthPickerComponent', () => {
       openPickerByClickTrigger();
       expect(nzOnOpenChange).toHaveBeenCalledWith(true);
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       flush();
       expect(nzOnOpenChange).toHaveBeenCalledWith(false);

diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
@@ -130,13 +130,12 @@ import { PREFIX_CLASS } from './util';
       nzConnectedOverlay
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayOpen]="realOpenState"
-      [cdkConnectedOverlayHasBackdrop]="!isOpenHandledByUser()"
       [cdkConnectedOverlayPositions]="overlayPositions"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-picker-wrapper'"
       (positionChange)="onPositionChange($event)"
-      (backdropClick)="onClickBackdrop()"
       (detach)="onOverlayDetach()"
       (overlayKeydown)="onOverlayKeydown($event)"
+      (overlayOutsideClick)="onClickOutside($event)"
     >
       <div
         class="ant-picker-wrapper"
@@ -357,12 +356,17 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
 
   onClickInputBox(event: MouseEvent): void {
     event.stopPropagation();
+    this.focus();
     if (!this.isOpenHandledByUser()) {
       this.showOverlay();
     }
   }
 
-  onClickBackdrop(): void {
+  onClickOutside(event: MouseEvent): void {
+    if (this.elementRef.nativeElement.contains(event.target)) {
+      return;
+    }
+
     if (this.panel?.isAllowed(this.datePickerService.value!, true)) {
       if (Array.isArray(this.datePickerService.value) && wrongSortOrder(this.datePickerService.value)) {
         const index = this.datePickerService.getActiveIndex(this.datePickerService.activeInput);

diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
@@ -60,7 +60,7 @@ describe('NzRangePickerComponent', () => {
       openPickerByClickTrigger();
       expect(getPickerContainer()).not.toBeNull();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -71,7 +71,7 @@ describe('NzRangePickerComponent', () => {
       fixture.detectChanges();
       openPickerByClickTrigger();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -151,7 +151,6 @@ describe('NzRangePickerComponent', () => {
       tick(500);
       fixture.detectChanges();
       expect(getPickerContainer()).not.toBeNull();
-      expect(queryFromOverlay('.cdk-overlay-backdrop')).toBeNull();
 
       fixtureInstance.nzOpen = false;
       fixture.detectChanges();
@@ -217,7 +216,7 @@ describe('NzRangePickerComponent', () => {
       openPickerByClickTrigger();
       expect(nzOnOpenChange).toHaveBeenCalledWith(true);
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -356,7 +355,7 @@ describe('NzRangePickerComponent', () => {
       dispatchMouseEvent(getSuperNextBtn('left'), 'click');
       fixture.detectChanges();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -430,7 +429,7 @@ describe('NzRangePickerComponent', () => {
       fixture.detectChanges();
       expect(getRangePickerRightInput(fixture.debugElement) === document.activeElement).toBeTruthy();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -511,7 +510,7 @@ describe('NzRangePickerComponent', () => {
       ).toBeTruthy();
 
       // Close left panel
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -537,7 +536,7 @@ describe('NzRangePickerComponent', () => {
       fixture.detectChanges();
 
       // Close left panel
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -548,7 +547,7 @@ describe('NzRangePickerComponent', () => {
       expect(+queryFromOverlay('.ant-picker-time-panel-column:nth-child(3) li:first-child').textContent!.trim()).toBe(1);
 
       // Close left panel
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -767,7 +766,6 @@ describe('NzRangePickerComponent', () => {
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
-      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeNull();
       // TODO: input value should not be change
       // expect(leftInput.value).toBe('2018-09-11');
     }));

diff --git a/components/date-picker/year-picker.component.spec.ts b/components/date-picker/year-picker.component.spec.ts
@@ -51,7 +51,7 @@ describe('NzYearPickerComponent', () => {
       openPickerByClickTrigger();
       expect(getPickerContainer()).not.toBeNull();
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -122,9 +122,6 @@ describe('NzYearPickerComponent', () => {
         tick(500);
         fixture.detectChanges();
         expect(getPickerContainer()).not.toBeNull();
-        expect(queryFromOverlay('.cdk-overlay-backdrop')).toBeNull();
-        // dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
-        // expect(getPickerContainer()).not.toBeNull();
 
         fixtureInstance.nzOpen = false;
         fixture.detectChanges();
@@ -200,7 +197,7 @@ describe('NzYearPickerComponent', () => {
       openPickerByClickTrigger();
       expect(nzOnOpenChange).toHaveBeenCalledWith(true);
 
-      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      dispatchMouseEvent(document.body, 'click');
       fixture.detectChanges();
       flush();
       expect(nzOnOpenChange).toHaveBeenCalledWith(false);

diff --git a/components/dropdown/doc/index.en-US.md b/components/dropdown/doc/index.en-US.md
@@ -27,7 +27,6 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 | `[nzTrigger]` | the trigger mode which executes the drop-down action | `'click' \| 'hover'` | `'hover'` |
 | `[nzClickHide]` | whether hide menu when click | `boolean` | `true` |
 | `[nzVisible]` | whether the dropdown menu is visible, double binding | `boolean` | - |
-| `[nzBackdrop]` | whether the dropdown has a backdrop when `nzTrigger` is `click` | `boolean` | `true` |
 | `[nzOverlayClassName]` | Class name of the dropdown root element | `string` | - |
 | `[nzOverlayStyle]` | Style of the dropdown root element | `object` | - |
 | `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter<boolean>` | - |

diff --git a/components/dropdown/doc/index.zh-CN.md b/components/dropdown/doc/index.zh-CN.md
@@ -28,7 +28,6 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 | `[nzTrigger]` | 触发下拉的行为 | `'click' \| 'hover'` | `'hover'` |
 | `[nzClickHide]` | 点击后是否隐藏菜单 | `boolean` | `true` |
 | `[nzVisible]` | 菜单是否显示，可双向绑定 | `boolean` | - |
-| `[nzBackdrop]` | 是否在 `nzTrigger` 为 `click`时增加背景蒙版 | `boolean` | `true` |
 | `[nzOverlayClassName]` | 下拉根元素的类名称 | `string` | - |
 | `[nzOverlayStyle]` | 下拉根元素的样式 | `object` | - |
 | `(nzVisibleChange)` | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter<boolean>` | - |