From d8c886cd0394dc6c58cf99a0c2de5f0d113b7acb Mon Sep 17 00:00:00 2001
From: arturovt <arthurandrosovich@gmail.com>
Date: Wed, 11 May 2022 09:42:14 +0300
Subject: [PATCH] fix(transfer): add `trackBy` to the list and track by the
 `hide` property

---
 components/transfer/transfer-list.component.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/transfer/transfer-list.component.ts b/components/transfer/transfer-list.component.ts
index e003935ee8..ab4f4898fb 100644
--- a/components/transfer/transfer-list.component.ts
+++ b/components/transfer/transfer-list.component.ts
@@ -31,7 +31,7 @@ import { TransferDirection, TransferItem } from './interface';
     <ng-template #defaultRenderList>
       <ul *ngIf="stat.shownCount > 0" class="ant-transfer-list-content">
         <li
-          *ngFor="let item of validData"
+          *ngFor="let item of validData; trackBy: trackByHide"
           (click)="onItemSelect(item)"
           class="ant-transfer-list-content-item"
           [ngClass]="{ 'ant-transfer-list-content-item-disabled': disabled || item.disabled }"
@@ -158,6 +158,12 @@ export class NzTransferListComponent implements AfterViewInit {
     return this.dataSource.filter(w => !w.hide);
   }
 
+  trackByHide(_index: number, item: TransferItem): boolean | undefined {
+    // The `validData` is a getter which returns new array each time the property is read.
+    // This may lead to unexpected re-renders, tho the array hasn't been updated.
+    return item.hide;
+  }
+
   onItemSelect = (item: TransferItem): void => {
     if (this.disabled || item.disabled) {
       return;