Merge pull request #11425 from IgniteUI/mdragnev/11364

fix(Pivot): Remove a check if scrollComponent is already in the dom

Author: dkamburov

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts

@@ -288,29 +288,6 @@ describe('IgxForOf directive -', () => {
             expect(errorMessage).toBe('');
         });
 
-        it('should allow initially undefined value for igxForOf and then detect changes correctly once the value is updated', () => {
-            fix = TestBed.createComponent(VerticalVirtualNoDataComponent);
-            expect(() => {
-                fix.detectChanges();
-            }).not.toThrow();
-            displayContainer = fix.nativeElement.querySelector(DISPLAY_CONTAINER);
-            verticalScroller = fix.nativeElement.querySelector(VERTICAL_SCROLLER);
-            expect(displayContainer).not.toBeNull();
-            expect(verticalScroller).not.toBeNull();
-
-            fix.componentInstance.height = '400px';
-            fix.detectChanges();
-            fix.componentInstance.height = '500px';
-            fix.detectChanges();
-
-            let rowsRendered = displayContainer.querySelectorAll('div');
-            expect(rowsRendered.length).toBe(0);
-            fix.componentInstance.data = dg.generateVerticalData(fix.componentInstance.cols);
-            fix.detectChanges();
-            rowsRendered = displayContainer.querySelectorAll('div');
-            expect(rowsRendered.length).not.toBe(0);
-        });
-
         it('should always fill available space for last chunk size calculation - vertical virtualization', async () => {
             fix.componentInstance.height = '1900px';
             const virtualContainer = fix.componentInstance.parentVirtDir;
@@ -379,6 +356,49 @@ describe('IgxForOf directive -', () => {
         });
     });
 
+    describe('vertical virtual component no data', () => {
+        let fix: ComponentFixture<VerticalVirtualComponent>;
+        configureTestSuite();
+        beforeAll(waitForAsync(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    TestIgxForOfDirective,
+                    VerticalVirtualNoDataComponent,
+                    VerticalVirtualComponent
+                ],
+                imports: [IgxForOfModule],
+                providers: [{ provide: NgZone, useFactory: () => new TestNgZone() }]
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fix = TestBed.createComponent(VerticalVirtualNoDataComponent);
+        });
+
+        it('should allow initially undefined value for igxForOf and then detect changes correctly once the value is updated', () => {
+            expect(() => {
+                fix.detectChanges();
+            }).not.toThrow();
+            displayContainer = fix.nativeElement.querySelector(DISPLAY_CONTAINER);
+            verticalScroller = fix.nativeElement.querySelector(VERTICAL_SCROLLER);
+            expect(displayContainer).not.toBeNull();
+            expect(verticalScroller).not.toBeNull();
+
+            fix.componentInstance.height = '400px';
+            fix.detectChanges();
+            fix.componentInstance.height = '500px';
+            fix.detectChanges();
+
+            let rowsRendered = displayContainer.querySelectorAll('div');
+            expect(rowsRendered.length).toBe(0);
+            fix.componentInstance.data = dg.generateVerticalData(fix.componentInstance.cols);
+            fix.detectChanges();
+            rowsRendered = displayContainer.querySelectorAll('div');
+            expect(rowsRendered.length).not.toBe(0);
+        });
+
+    });
+
     describe('vertical and horizontal virtual component', () => {
         let fix: ComponentFixture<VirtualComponent>;
 

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -423,8 +423,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         if (this.igxForScrollOrientation === 'vertical') {
             this.dc.instance._viewContainer.element.nativeElement.style.top = '0px';
             this.scrollComponent = this.syncScrollService.getScrollMaster(this.igxForScrollOrientation);
-            if (!this.scrollComponent || !this.document.contains(this.scrollComponent.elementRef.nativeElement)) {
-                this.scrollComponent = vc.createComponent(VirtualHelperComponent).instance
+            if (!this.scrollComponent || this.scrollComponent.destroyed) {
+                this.scrollComponent = vc.createComponent(VirtualHelperComponent).instance;
             }
             this._maxHeight = this._calcMaxBrowserHeight();
             this.scrollComponent.size = this.igxForOf ? this._calcHeight() : 0;