perf(module:table): do not run change detections on click events for …

…the `nz-filter-trigger` (#7095)

components/table/src/addon/filter-trigger.component.ts

@@ -7,19 +7,26 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   OnChanges,
+  OnInit,
   Output,
   SimpleChanges,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { warnDeprecation } from 'ng-zorro-antd/core/logger';
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
-import { NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
+import { NzDropDownDirective, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'filterTrigger';
 
@@ -42,13 +49,13 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'filterTrigger';
       [class.ant-table-filter-open]="nzVisible"
       [nzVisible]="nzVisible"
       (nzVisibleChange)="onVisibleChange($event)"
-      (click)="onFilterClick($event)"
     >
       <ng-content></ng-content>
     </span>
-  `
+  `,
+  providers: [NzDestroyService]
 })
-export class NzFilterTriggerComponent implements OnChanges {
+export class NzFilterTriggerComponent implements OnChanges, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
 
   static ngAcceptInputType_nzBackdrop: BooleanInput;
@@ -67,15 +74,13 @@ export class NzFilterTriggerComponent implements OnChanges {
 
   @Output() readonly nzVisibleChange = new EventEmitter<boolean>();
 
+  @ViewChild(NzDropDownDirective, { static: true, read: ElementRef }) nzDropdown!: ElementRef<HTMLElement>;
+
   onVisibleChange(visible: boolean): void {
     this.nzVisible = visible;
     this.nzVisibleChange.next(visible);
   }
 
-  onFilterClick($event: MouseEvent): void {
-    $event.stopPropagation();
-  }
-
   hide(): void {
     this.nzVisible = false;
     this.cdr.markForCheck();
@@ -86,7 +91,12 @@ export class NzFilterTriggerComponent implements OnChanges {
     this.cdr.markForCheck();
   }
 
-  constructor(public readonly nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) {}
+  constructor(
+    public readonly nzConfigService: NzConfigService,
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+    private destroy$: NzDestroyService
+  ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     const { nzHasBackdrop } = changes;
@@ -96,4 +106,14 @@ export class NzFilterTriggerComponent implements OnChanges {
       );
     }
   }
+
+  ngOnInit(): void {
+    this.ngZone.runOutsideAngular(() => {
+      fromEvent(this.nzDropdown.nativeElement, 'click')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(event => {
+          event.stopPropagation();
+        });
+    });
+  }
 }

components/table/src/testing/th.spec.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, ViewChild } from '@angular/core';
+import { ApplicationRef, Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -94,6 +94,20 @@ describe('nz-th', () => {
         }).createComponent(NzTestDisableThComponent);
       }).toThrow();
     });
+    it('should not run change detection on click events for the `nz-filter-trigger`', () => {
+      const appRef = TestBed.inject(ApplicationRef);
+      const event = new MouseEvent('click');
+
+      spyOn(appRef, 'tick');
+      spyOn(event, 'stopPropagation').and.callThrough();
+
+      fixture.debugElement.nativeElement
+        .querySelector('nz-filter-trigger .ant-table-filter-trigger')
+        .dispatchEvent(event);
+
+      expect(appRef.tick).not.toHaveBeenCalled();
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
   });
 });