fix(module:cascader,select,time-picker,tooltip,tree-select): take in account shadow dom when getting the target of an event (#7853)

use _getEventTarget provided by @angular/cdk/platform to make sure that
the chain of target is not cut by the shadow dom

Author: Lukinoh

components/cascader/cascader.component.ts

@@ -6,6 +6,7 @@
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { BACKSPACE, DOWN_ARROW, ENTER, ESCAPE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import { CdkConnectedOverlay, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
+import { _getEventTarget } from '@angular/cdk/platform';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -671,7 +672,8 @@ export class NzCascaderComponent
   }
 
   onClickOutside(event: MouseEvent): void {
-    if (!this.el.contains(event.target as Node)) {
+    const target = _getEventTarget(event);
+    if (!this.el.contains(target as Node)) {
       this.closeMenu();
     }
   }

components/select/select.component.ts

@@ -12,7 +12,7 @@ import {
   ConnectedOverlayPositionChange,
   ConnectionPositionPair
 } from '@angular/cdk/overlay';
-import { Platform } from '@angular/cdk/platform';
+import { _getEventTarget, Platform } from '@angular/cdk/platform';
 import { NgIf, NgStyle } from '@angular/common';
 import {
   AfterContentInit,
@@ -547,7 +547,8 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
   }
 
   onClickOutside(event: MouseEvent): void {
-    if (!this.host.nativeElement.contains(event.target as HTMLElement)) {
+    const target = _getEventTarget(event);
+    if (!this.host.nativeElement.contains(target as Node)) {
       this.setOpenState(false);
     }
   }

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

@@ -5,7 +5,7 @@
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { CdkOverlayOrigin, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
-import { Platform } from '@angular/cdk/platform';
+import { _getEventTarget, Platform } from '@angular/cdk/platform';
 import { AsyncPipe, NgClass, NgIf } from '@angular/common';
 import {
   AfterViewInit,
@@ -298,7 +298,8 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   }
 
   onClickOutside(event: MouseEvent): void {
-    if (!this.element.nativeElement.contains(event.target)) {
+    const target = _getEventTarget(event);
+    if (!this.element.nativeElement.contains(target)) {
       this.setCurrentValueAndClose();
     }
   }

components/tooltip/base.ts

@@ -5,6 +5,7 @@
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { CdkConnectedOverlay, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
+import { _getEventTarget } from '@angular/cdk/platform';
 import { isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
@@ -472,7 +473,8 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit {
   }
 
   onClickOutside(event: MouseEvent): void {
-    if (!this.origin.nativeElement.contains(event.target) && this.nzTrigger !== null) {
+    const target = _getEventTarget(event);
+    if (!this.origin.nativeElement.contains(target) && this.nzTrigger !== null) {
       this.hide();
     }
   }

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

@@ -12,6 +12,7 @@ import {
   ConnectedOverlayPositionChange,
   ConnectionPositionPair
 } from '@angular/cdk/overlay';
+import { _getEventTarget } from '@angular/cdk/platform';
 import { NgClass, NgFor, NgIf, NgStyle, SlicePipe } from '@angular/common';
 import {
   ChangeDetectorRef,
@@ -699,7 +700,8 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   }
 
   onClickOutside(event: MouseEvent): void {
-    if (!this.elementRef.nativeElement.contains(event.target)) {
+    const target = _getEventTarget(event);
+    if (!this.elementRef.nativeElement.contains(target)) {
       this.closeDropDown();
     }
   }