fix(igx-combo): disable checkbox animations on scroll #3243

IgniteUI · Dec 4, 2018 · 0c48a10 · 0c48a10
1 parent 94df8b8
commit 0c48a10
Show file tree

Hide file tree

Showing 4 changed files with 28 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>();
@@ -30,6 +30,11 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
         super(elementRef, cdr, selection);
     }
 
+    /**
+     * @hidden
+     */
+    private _vScrollListener = null;
+
     /**
      * @hidden
      */
@@ -331,6 +336,14 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
     }
 
     protected scrollToHiddenItem(newItem: any): void {}
+
+    /**
+     * @hidden
+     */
+    protected verticalScrollHandler(event) {
+        this.disableTransitions = true;
+    }
+
     /**
      * @hidden
      */
@@ -377,10 +390,16 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
         this.verticalScrollContainer.getVerticalScroll().scrollTop = this._scrollPosition;
     }
 
+    public ngAfterViewInit() {
+        this._vScrollListener = this.verticalScrollHandler.bind(this);
+        this.verticalScrollContainer.getVerticalScroll().addEventListener('scroll', this._vScrollListener);
+    }
+
     /**
      *@hidden
      */
     public ngOnDestroy(): void {
+        this.verticalScrollContainer.getVerticalScroll().removeEventListener('scroll', this._vScrollListener);
         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,11 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView {
         return this.elementRef.nativeElement;
     }
 
+    /**
+     * @hidden
+     */
+    public disableTransitions = false;
+
     /**
      * Get dropdown's html element of it scroll container
      */