perf(module:transfer): do not trigger change detection when the checkbox is clicked (#7124)

Author: arturovt

components/transfer/transfer-list.component.ts

@@ -4,15 +4,22 @@
  */
 
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   Output,
+  QueryList,
   TemplateRef,
+  ViewChildren,
   ViewEncapsulation
 } from '@angular/core';
+import { fromEvent, merge, Observable } from 'rxjs';
+import { startWith, switchMap } from 'rxjs/operators';
 
 import { TransferDirection, TransferItem } from './interface';
 
@@ -30,10 +37,10 @@ import { TransferDirection, TransferItem } from './interface';
           [ngClass]="{ 'ant-transfer-list-content-item-disabled': disabled || item.disabled }"
         >
           <label
+            #checkboxes
             nz-checkbox
             [nzChecked]="item.checked"
             (nzCheckedChange)="onItemSelect(item)"
-            (click)="$event.stopPropagation()"
             [nzDisabled]="disabled || item.disabled"
           >
             <ng-container *ngIf="!render; else renderContainer">{{ item.title }}</ng-container>
@@ -111,7 +118,7 @@ import { TransferDirection, TransferItem } from './interface';
     '[class.ant-transfer-list-with-footer]': '!!footer'
   }
 })
-export class NzTransferListComponent {
+export class NzTransferListComponent implements AfterViewInit {
   // #region fields
 
   @Input() direction: TransferDirection = 'left';
@@ -138,6 +145,8 @@ export class NzTransferListComponent {
   @Output() readonly handleSelect: EventEmitter<TransferItem> = new EventEmitter();
   @Output() readonly filterChange: EventEmitter<{ direction: TransferDirection; value: string }> = new EventEmitter();
 
+  @ViewChildren('checkboxes', { read: ElementRef }) checkboxes!: QueryList<ElementRef<HTMLLabelElement>>;
+
   stat = {
     checkAll: false,
     checkHalf: false,
@@ -203,10 +212,33 @@ export class NzTransferListComponent {
 
   // #endregion
 
-  constructor(private cdr: ChangeDetectorRef) {}
+  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
 
   markForCheck(): void {
     this.updateCheckStatus();
     this.cdr.markForCheck();
   }
+
+  ngAfterViewInit(): void {
+    this.checkboxes.changes
+      .pipe(
+        startWith(this.checkboxes),
+        switchMap(() => {
+          const checkboxes = this.checkboxes.toArray();
+          // Caretaker note: we explicitly should call `subscribe()` within the root zone.
+          // `runOutsideAngular(() => fromEvent(...))` will just create an observable within the root zone,
+          // but `addEventListener` is called when the `fromEvent` is subscribed.
+          return new Observable<MouseEvent>(subscriber =>
+            this.ngZone.runOutsideAngular(() =>
+              merge(...checkboxes.map(checkbox => fromEvent<MouseEvent>(checkbox.nativeElement, 'click'))).subscribe(
+                subscriber
+              )
+            )
+          );
+        })
+      )
+      .subscribe(event => {
+        event.stopPropagation();
+      });
+  }
 }

components/transfer/transfer.spec.ts

@@ -1,6 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { BidiModule, Dir } from '@angular/cdk/bidi';
-import { Component, DebugElement, Injector, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  ApplicationRef,
+  Component,
+  DebugElement,
+  Injector,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -281,6 +290,23 @@ describe('transfer', () => {
       ).attributes.getNamedItem('placeholder')!.textContent;
       expect(searchPhText).toBe(en_US.Transfer.searchPlaceholder);
     });
+
+    describe('change detection behavior', () => {
+      it('should not trigger change detection when the `ant-transfer-list-content-item label` is clicked', () => {
+        const appRef = TestBed.inject(ApplicationRef);
+        const event = new MouseEvent('click');
+
+        spyOn(appRef, 'tick');
+        spyOn(event, 'stopPropagation').and.callThrough();
+
+        const [label] = fixture.nativeElement.querySelectorAll('.ant-transfer-list-content-item label');
+
+        label.dispatchEvent(event);
+
+        expect(appRef.tick).not.toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('#canMove', () => {