fix(module:core): outside click closed the lower overlay

close #6060

components/auto-complete/autocomplete-trigger.directive.ts

@@ -9,6 +9,7 @@ import {
   FlexibleConnectedPositionStrategy,
   Overlay,
   OverlayConfig,
+  OverlayContainer,
   OverlayRef,
   PositionStrategy
 } from '@angular/cdk/overlay';
@@ -79,6 +80,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   constructor(
     private elementRef: ElementRef,
     private overlay: Overlay,
+    private overlayContainer: OverlayContainer,
     private viewContainerRef: ViewContainerRef,
     @Optional() private nzInputGroupWhitSuffixOrPrefixDirective: NzInputGroupWhitSuffixOrPrefixDirective,
     @Optional() @Inject(DOCUMENT) private document: NzSafeAny
@@ -216,7 +218,13 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
 
   private subscribeOverlayOutsideClick(): Subscription {
     return this.overlayRef!.outsidePointerEvents()
-      .pipe(filter((e: MouseEvent) => !this.elementRef.nativeElement.contains(e.target)))
+      .pipe(
+        filter(
+          (e: MouseEvent) =>
+            !this.elementRef.nativeElement.contains(e.target) &&
+            !this.overlayContainer.getContainerElement().contains(e.target as HTMLElement)
+        )
+      )
       .subscribe(() => {
         this.closePanel();
       });

components/cascader/cascader.component.ts

@@ -113,11 +113,12 @@ const defaultDisplayRender = (labels: string[]) => labels.join(' / ');
     <ng-template
       cdkConnectedOverlay
       nzConnectedOverlay
+      nzIgnoreOriginWthOutsideClick
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayPositions]="positions"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-cascader-menus'"
       [cdkConnectedOverlayOpen]="menuVisible"
-      (overlayOutsideClick)="onClickOutside($event)"
+      (nzOutsideClick)="closeMenu()"
       (detach)="closeMenu()"
     >
       <div
@@ -592,12 +593,6 @@ 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;
   }

components/core/overlay/nz-outsite-click.ts

@@ -0,0 +1,39 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { CdkConnectedOverlay, OverlayContainer } from '@angular/cdk/overlay';
+import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { BooleanInput } from 'ng-zorro-antd/core/types';
+import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { Subscription } from 'rxjs';
+
+@Directive({
+  selector: '[cdkConnectedOverlay][nzOutsideClick]',
+  exportAs: 'nzOutsideClick'
+})
+export class NzOutsideClickDirective implements OnDestroy, OnInit {
+  static ngAcceptInputType_nzIgnoreOriginWthOutsideClick: BooleanInput;
+
+  @Output() readonly nzOutsideClick = new EventEmitter<MouseEvent>();
+  @Input() @InputBoolean() nzIgnoreOriginWthOutsideClick = false;
+  private backdropClickSubscription = Subscription.EMPTY;
+  constructor(private cdkConnectedOverlay: CdkConnectedOverlay, private overlayContainer: OverlayContainer) {
+    console.log(1);
+  }
+
+  ngOnInit(): void {
+    this.backdropClickSubscription = this.cdkConnectedOverlay.overlayOutsideClick.asObservable().subscribe((event: MouseEvent) => {
+      const inContainer = this.overlayContainer.getContainerElement().contains(event.target as HTMLElement);
+      const inOrigin = this.cdkConnectedOverlay.origin.elementRef.nativeElement.contains(event.target as HTMLElement);
+      if (!inContainer && (!this.nzIgnoreOriginWthOutsideClick || !inOrigin)) {
+        this.nzOutsideClick.emit(event);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.backdropClickSubscription.unsubscribe();
+  }
+}

components/core/overlay/nz-overlay.module.ts

@@ -5,9 +5,10 @@
 
 import { NgModule } from '@angular/core';
 import { NzConnectedOverlayDirective } from './nz-connected-overlay';
+import { NzOutsideClickDirective } from './nz-outsite-click';
 
 @NgModule({
-  declarations: [NzConnectedOverlayDirective],
-  exports: [NzConnectedOverlayDirective]
+  declarations: [NzConnectedOverlayDirective, NzOutsideClickDirective],
+  exports: [NzConnectedOverlayDirective, NzOutsideClickDirective]
 })
 export class NzOverlayModule {}

components/core/overlay/public-api.ts

@@ -4,5 +4,6 @@
  */
 
 export * from './nz-connected-overlay';
+export * from './nz-outsite-click';
 export * from './nz-overlay.module';
 export * from './overlay-position';

components/date-picker/picker.component.ts

@@ -135,7 +135,7 @@ import { PREFIX_CLASS } from './util';
       (positionChange)="onPositionChange($event)"
       (detach)="onOverlayDetach()"
       (overlayKeydown)="onOverlayKeydown($event)"
-      (overlayOutsideClick)="onClickOutside($event)"
+      (nzOutsideClick)="onClickOutside($event)"
     >
       <div class="ant-picker-wrapper" [nzNoAnimation]="noAnimation" [@slideMotion]="'enter'" style="position: relative;">
         <div

components/mention/mention.component.ts

@@ -9,6 +9,7 @@ import {
   FlexibleConnectedPositionStrategy,
   Overlay,
   OverlayConfig,
+  OverlayContainer,
   OverlayRef,
   PositionStrategy
 } from '@angular/cdk/overlay';
@@ -129,6 +130,7 @@ export class NzMentionComponent implements OnDestroy, OnInit, OnChanges {
     @Optional() @Inject(DOCUMENT) private ngDocument: NzSafeAny,
     private cdr: ChangeDetectorRef,
     private overlay: Overlay,
+    private overlayContainer: OverlayContainer,
     private viewContainerRef: ViewContainerRef,
     private nzMentionService: NzMentionService
   ) {}
@@ -329,7 +331,9 @@ export class NzMentionComponent implements OnDestroy, OnInit, OnChanges {
       fromEvent<TouchEvent>(this.ngDocument, 'touchend')
     ).subscribe((event: MouseEvent | TouchEvent) => {
       const clickTarget = event.target as HTMLElement;
-      if (this.isOpen && clickTarget !== this.trigger.el.nativeElement && !this.overlayRef?.overlayElement.contains(clickTarget)) {
+      const inOverlayContainer = this.overlayContainer.getContainerElement().contains(clickTarget);
+      const inOverlayElement = this.overlayRef?.overlayElement.contains(clickTarget);
+      if (this.isOpen && clickTarget !== this.trigger.el.nativeElement && !inOverlayContainer && !inOverlayElement) {
         this.closeDropdown();
       }
     });

components/popconfirm/popconfirm.ts

@@ -118,8 +118,9 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
       #overlay="cdkConnectedOverlay"
       cdkConnectedOverlay
       nzConnectedOverlay
+      nzIgnoreOriginWthOutsideClick
       [cdkConnectedOverlayOrigin]="origin"
-      (overlayOutsideClick)="onClickOutside($event)"
+      (nzOutsideClick)="hide()"
       (detach)="hide()"
       (positionChange)="onPositionChange($event)"
       [cdkConnectedOverlayPositions]="_positions"

components/popover/demo/module

@@ -1,5 +1,5 @@
-import { NzPopoverModule } from 'ng-zorro-antd/popover';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
 
 export const moduleList = [ NzPopoverModule, NzButtonModule, NzIconModule ];

components/popover/popover.ts

@@ -74,11 +74,12 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
       #overlay="cdkConnectedOverlay"
       cdkConnectedOverlay
       nzConnectedOverlay
+      nzIgnoreOriginWthOutsideClick
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayPositions]="_positions"
       [cdkConnectedOverlayOpen]="_visible"
       [cdkConnectedOverlayPush]="true"
-      (overlayOutsideClick)="onClickOutside($event)"
+      (nzOutsideClick)="hide()"
       (detach)="hide()"
       (positionChange)="onPositionChange($event)"
     >

components/select/select.component.ts

@@ -107,14 +107,15 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
     <ng-template
       cdkConnectedOverlay
       nzConnectedOverlay
+      nzIgnoreOriginWthOutsideClick
       [cdkConnectedOverlayMinWidth]="$any(nzDropdownMatchSelectWidth ? null : triggerWidth)"
       [cdkConnectedOverlayWidth]="$any(nzDropdownMatchSelectWidth ? triggerWidth : null)"
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-select-dropdown'"
       [cdkConnectedOverlayPanelClass]="nzDropdownClassName!"
       [cdkConnectedOverlayOpen]="nzOpen"
       (overlayKeydown)="onOverlayKeyDown($event)"
-      (overlayOutsideClick)="onClickOutside($event)"
+      (nzOutsideClick)="setOpenState(false)"
       (detach)="setOpenState(false)"
       (positionChange)="onPositionChange($event)"
     >
@@ -461,12 +462,6 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
     this.updateListOfValue([]);
   }
 
-  onClickOutside(event: MouseEvent): void {
-    if (!this.elementRef.nativeElement.contains(event.target)) {
-      this.setOpenState(false);
-    }
-  }
-
   focus(): void {
     this.nzSelectTopControlComponent.focus();
   }

components/time-picker/time-picker.component.ts

@@ -67,13 +67,14 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker';
     <ng-template
       cdkConnectedOverlay
       nzConnectedOverlay
+      nzIgnoreOriginWthOutsideClick
       [cdkConnectedOverlayPositions]="overlayPositions"
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayOpen]="nzOpen"
       [cdkConnectedOverlayOffsetY]="-2"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-picker-dropdown'"
       (detach)="close()"
-      (overlayOutsideClick)="onClickOutside($event)"
+      (nzOutsideClick)="setCurrentValueAndClose()"
     >
       <div [@slideMotion]="'enter'" class="ant-picker-dropdown">
         <div class="ant-picker-panel-container">
@@ -218,12 +219,6 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
     this.emitValue(null);
   }
 
-  onClickOutside(event: MouseEvent): void {
-    if (!this.element.nativeElement.contains(event.target)) {
-      this.setCurrentValueAndClose();
-    }
-  }
-
   onFocus(value: boolean): void {
     this.focused = value;
   }

components/tooltip/base.ts

@@ -421,12 +421,6 @@ export abstract class NzTooltipBaseComponent implements OnDestroy {
     this.cdr.markForCheck();
   }
 
-  onClickOutside(event: MouseEvent): void {
-    if (!this.origin.elementRef.nativeElement.contains(event.target)) {
-      this.hide();
-    }
-  }
-
   /**
    * Hide the component while the content is empty.
    */

components/tooltip/tooltip.ts

@@ -80,11 +80,12 @@ export class NzTooltipDirective extends NzTooltipBaseDirective {
       #overlay="cdkConnectedOverlay"
       cdkConnectedOverlay
       nzConnectedOverlay
+      nzIgnoreOriginWthOutsideClick
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayOpen]="_visible"
       [cdkConnectedOverlayPositions]="_positions"
       [cdkConnectedOverlayPush]="true"
-      (overlayOutsideClick)="onClickOutside($event)"
+      (nzOutsideClick)="hide()"
       (detach)="hide()"
       (positionChange)="onPositionChange($event)"
     >

components/tree-select/tree-select.component.ts

@@ -64,12 +64,13 @@ const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown'
     <ng-template
       cdkConnectedOverlay
       nzConnectedOverlay
+      nzIgnoreOriginWthOutsideClick
       [cdkConnectedOverlayOrigin]="cdkOverlayOrigin"
       [cdkConnectedOverlayOpen]="nzOpen"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-select-tree-dropdown'"
       [cdkConnectedOverlayMinWidth]="$any(nzDropdownMatchSelectWidth ? null : triggerWidth)"
       [cdkConnectedOverlayWidth]="$any(nzDropdownMatchSelectWidth ? triggerWidth : null)"
-      (overlayOutsideClick)="onClickOutside($event)"
+      (nzOutsideClick)="closeDropDown()"
       (detach)="closeDropDown()"
       (positionChange)="onPositionChange($event)"
     >
@@ -517,12 +518,6 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
     this.nzCleared.emit();
   }
 
-  onClickOutside(event: MouseEvent): void {
-    if (!this.elementRef.nativeElement.contains(event.target)) {
-      this.closeDropDown();
-    }
-  }
-
   setSearchValues($event: NzFormatEmitEvent): void {
     Promise.resolve().then(() => {
       this.isNotFound = (this.nzShowSearch || this.isMultiple) && !!this.inputValue && $event.matchedKeys!.length === 0;