Merge pull request #1664 from IgniteUI/mvenkov/drop-down-flicker-fix

fix for issue 1663

Author: bazal4o

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -73,12 +73,13 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     public open(fireEvents?: boolean, overlaySettings?: OverlaySettings) {
         if (!this.collapsed) { return; }
 
+        this.collapsed = false;
+        this.cdr.detectChanges();
+
         if (fireEvents) {
             this.onOpening.emit();
         }
 
-        this.collapsed = false;
-
         this._overlayId = this.overlayService.show(this.elementRef, overlaySettings);
         this._overlayClosedSub = this.overlayService.onClosed
             .pipe(...this._overlaySubFilter)

projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts

@@ -5,7 +5,8 @@ import {
     HostBinding,
     HostListener,
     Inject,
-    Input } from '@angular/core';
+    Input
+} from '@angular/core';
 import { IgxDropDownComponent, ISelectionEventArgs } from './drop-down.component';
 
 /**
@@ -52,7 +53,7 @@ export class IgxDropDownItemComponent {
         }
 
         if (value && !this.dropDown.collapsed) {
-            this.elementRef.nativeElement.focus();
+            this.elementRef.nativeElement.focus({ preventScroll: true });
         }
         this._isFocused = value;
     }

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, ContentChildren, DebugElement, ViewChild } from '@angular/core';
+import { Component, ContentChildren, DebugElement, ViewChild, OnInit } from '@angular/core';
 import { async, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -29,7 +29,8 @@ describe('IgxDropDown ', () => {
                 IgxDropDownTestScrollComponent,
                 IgxDropDownTestDisabledComponent,
                 IgxDropDownTestDisabledAnyComponent,
-                IgxDropDownTestEmptyListComponent
+                IgxDropDownTestEmptyListComponent,
+                IgxDropDownWithScrollComponent
             ],
             imports: [
                 IgxDropDownModule,
@@ -807,6 +808,19 @@ describe('IgxDropDown ', () => {
             expect(igxDropDown.collapsed).toEqual(true);
         });
     }));
+
+    it('#1663 drop down flickers on open', () => {
+        const fixture = TestBed.createComponent(IgxDropDownWithScrollComponent);
+        fixture.detectChanges();
+        const button = fixture.debugElement.query(By.css('button')).nativeElement;
+        const igxDropDown = fixture.componentInstance.dropdownScroll;
+        button.click();
+        igxDropDown.open();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect((<any>igxDropDown).toggleDirective.element.scrollTop).toEqual(44);
+        });
+    });
 });
 
 @Component({
@@ -997,3 +1011,35 @@ class IgxDropDownTestEmptyListComponent {
         this.dropdownEmpty.toggle();
     }
 }
+@Component({
+    template: `
+    <button (click)="selectItem5()">Select 5</button>
+    <igx-drop-down #scrollDropDown>
+        <igx-drop-down-item *ngFor="let item of items">
+            {{ item.field }}
+        </igx-drop-down-item>
+    </igx-drop-down>
+    `
+})
+class IgxDropDownWithScrollComponent implements OnInit {
+
+    @ViewChild('scrollDropDown', { read: IgxDropDownComponent })
+    public dropdownScroll: IgxDropDownComponent;
+
+    public items: any[] = [];
+
+    public toggleDropDown() {
+        this.dropdownScroll.toggle();
+    }
+
+    public selectItem5() {
+        this.dropdownScroll.setSelectedItem(4);
+    }
+
+    ngOnInit() {
+        this.dropdownScroll.height = '200px';
+        for (let index = 1; index < 100; index++) {
+            this.items.push({ field: 'Item ' + index });
+        }
+    }
+}

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -402,8 +402,6 @@ export class IgxDropDownComponent implements OnInit {
      * @hidden
      */
     onToggleOpening() {
-        this.toggleDirective.collapsed = false;
-        this.cdr.detectChanges();
         this.scrollToItem(this.selectedItem);
         this.onOpening.emit();
     }