From ff16c78141eaaab07e0b209b7c5f1705c4b66408 Mon Sep 17 00:00:00 2001
From: NikolayAlipiev <nikolay.alipiev@gmail.com>
Date: Wed, 28 Nov 2018 15:01:16 +0200
Subject: [PATCH] fix(igx-grid): disable checkbox animations on scroll #2523

---
 .../igniteui-angular/src/lib/grids/grid-base.component.ts  | 7 +++++++
 .../src/lib/grids/grid/grid-row.component.html             | 2 +-
 .../src/lib/grids/tree-grid/tree-grid-row.component.html   | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
index 8ee3858489d..584a203248f 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -1920,6 +1920,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      */
     public allRowsSelected = false;
 
+    /**
+     * @hidden
+     */
+    public disableTransitions = false;
+
     /**
      * @hidden
      */
@@ -2023,12 +2028,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
     private verticalScrollHandler(event) {
         this.verticalScrollContainer.onScroll(event);
+        this.disableTransitions = true;
         this.zone.run(() => {
             this.cdr.detectChanges();
             this.verticalScrollContainer.onChunkLoad.emit(this.verticalScrollContainer.state);
             if (this.rowEditable) {
                 this.changeRowEditingOverlayStateOnScroll(this.rowInEditMode);
             }
+            this.disableTransitions = false;
         });
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
index 55e3f6a5b41..77dea99fe0e 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -3,7 +3,7 @@
 </ng-container>
 <ng-container *ngIf="showRowCheckboxes">
     <div class="igx-grid__cbx-selection">
-        <igx-checkbox [checked]="isSelected" (change)="onCheckboxClick($event)" disableRipple="true" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
+        <igx-checkbox [checked]="isSelected" (change)="onCheckboxClick($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
     </div>
 </ng-container>
 <ng-container *ngIf="pinnedColumns.length > 0">
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
index 46f79bc9997..2fc3a915e4b 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="rowSelectable">
     <div class="igx-grid__cbx-selection">
-        <igx-checkbox [checked]="isSelected" (change)="onCheckboxClick($event)" disableRipple="true" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
+        <igx-checkbox [checked]="isSelected" (change)="onCheckboxClick($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
     </div>
 </ng-container>
 <ng-container *ngIf="pinnedColumns.length > 0">