Disable combo checkbox animations on scroll (#3304)

* fix(igx-combo): disable checkbox animations on scroll #3243 * refactor(igx-combo): remove bind, move prop #3243 * refactor(igx-cobmo): refactor method signiture #3243 * refactor(igx-combo): revert prev move of property #3243
IgniteUI · Dec 6, 2018 · d615d5f · d615d5f
1 parent d8a4fa7
commit d615d5f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts
@@ -1,6 +1,6 @@
 import {
     ChangeDetectorRef, Component, ContentChild,
-    ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy
+    ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy, AfterViewInit
 } from '@angular/core';
 import { takeUntil, take } from 'rxjs/operators';
 import { IgxComboItemComponent } from './combo-item.component';
@@ -18,7 +18,7 @@ import { Navigate } from '../drop-down/drop-down.common';
     templateUrl: '../drop-down/drop-down.component.html',
     providers: [{ provide: IgxDropDownBase, useExisting: IgxComboDropDownComponent }]
 })
-export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDestroy {
+export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterViewInit, OnDestroy {
     private _children: QueryList<IgxDropDownItemBase>;
     private _scrollPosition = 0;
     private destroy$ = new Subject<boolean>();
@@ -331,6 +331,14 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
     }
 
     protected scrollToHiddenItem(newItem: any): void {}
+
+    /**
+     * @hidden
+     */
+    protected scrollHandler = () => {
+        this.disableTransitions = true;
+    }
+
     /**
      * @hidden
      */
@@ -377,10 +385,15 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
         this.verticalScrollContainer.getVerticalScroll().scrollTop = this._scrollPosition;
     }
 
+    public ngAfterViewInit() {
+        this.verticalScrollContainer.getVerticalScroll().addEventListener('scroll', this.scrollHandler);
+    }
+
     /**
      *@hidden
      */
     public ngOnDestroy(): void {
+        this.verticalScrollContainer.getVerticalScroll().removeEventListener('scroll', this.scrollHandler);
         this.destroy$.next(true);
         this.destroy$.complete();
     }

diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts
@@ -54,6 +54,7 @@ export class IgxComboItemComponent extends IgxDropDownItemBase {
      */
     @HostListener('click', ['$event'])
     clicked(event) {
+        this.dropDown.disableTransitions = false;
         if (this.disabled || this.isHeader) {
             const focusedItem = this.dropDown.focusedItem;
             if (focusedItem) {

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -43,7 +43,7 @@
             (onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
             <igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
                 <ng-container *ngIf="!item.isHeader">
-                    <igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
+                    <igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" [disableTransitions]="dropdown.disableTransitions" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
                 </ng-container>
                 <ng-container *ngIf="item.isHeader">
                     <ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>

diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts
@@ -271,6 +271,12 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView {
         return this.elementRef.nativeElement;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public disableTransitions = false;
+
     /**
      * Get dropdown's html element of it scroll container
      */