Implement resize observer to auto-reset scroll position when scrollbar element is detached/attached to DOM. (#8505)

* feat(igxForOf): Restore scroll position when scrollbar is detached from the DOM and then attached again as a result of projected containers.

Co-authored-by: MKirova <MKirova@DEV-MKIROVA>

Author: MayaKirova

projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts

@@ -6,8 +6,14 @@ import {
     ChangeDetectorRef,
     OnDestroy,
     Directive,
-    AfterViewInit
+    AfterViewInit,
+    Inject,
+    NgZone
 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil, throttleTime } from 'rxjs/operators';
+import { resizeObservable, isIE } from '../../core/utils';
 
 @Directive({
     selector: '[igxVirtualHelperBase]'
@@ -21,16 +27,25 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
 
     private _afterViewInit = false;
     private _scrollNativeSize: number;
+    private _detached = false;
+    protected destroy$ = new Subject<any>();
+
 
     ngAfterViewInit() {
         this._afterViewInit = true;
+        const delayTime = isIE() ? 40 : 0;
+        this._zone.runOutsideAngular(() => {
+            resizeObservable(this.nativeElement).pipe(
+                throttleTime(delayTime),
+                takeUntil(this.destroy$)).subscribe((event) => this.handleMutations(event));
+        });
     }
 
     @HostListener('scroll', ['$event'])
     onScroll(event) {
         this.scrollAmount = event.target.scrollTop || event.target.scrollLeft;
     }
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
         this._scrollNativeSize = this.calculateScrollNativeSize();
      }
 
@@ -40,6 +55,8 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
 
     public ngOnDestroy() {
         this.destroyed = true;
+        this.destroy$.next(true);
+        this.destroy$.complete();
     }
 
     public set size(value) {
@@ -60,6 +77,23 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
         return this._scrollNativeSize;
     }
 
+    protected get isAttachedToDom(): boolean {
+        return this.document.body.contains(this.nativeElement);
+    }
+
+    protected handleMutations(event) {
+        const hasSize = !(event[0].contentRect.height === 0 && event[0].contentRect.width === 0);
+        if (!hasSize && !this.isAttachedToDom) {
+            // scroll bar detached from DOM
+            this._detached = true;
+        } else if (this._detached && hasSize && this.isAttachedToDom) {
+            // attached back now.
+            this.restoreScroll();
+        }
+    }
+
+    protected restoreScroll() {}
+
     public calculateScrollNativeSize() {
         const div = document.createElement('div');
         const style = div.style;

projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts

@@ -1,5 +1,6 @@
-import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone } from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * @hidden
@@ -14,7 +15,11 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective {
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--horizontal';
 
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
-     }
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
+        super(elementRef, cdr, _zone, document);
+    }
+
+    protected restoreScroll() {
+        this.nativeElement.scrollLeft = this.scrollAmount;
+    }
 }

projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
-     ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+     ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone } from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
     selector: 'igx-virtual-helper',
@@ -20,11 +21,15 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--vertical';
 
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
+        super(elementRef, cdr, _zone, document);
     }
 
     ngOnInit() {
         this.scrollWidth = this.scrollNativeSize;
     }
+
+    protected restoreScroll() {
+        this.nativeElement.scrollTop = this.scrollAmount;
+    }
 }

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -1958,6 +1958,39 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight);
             expect(parseInt(window.getComputedStyle(grid.nativeElement).height, 10)).toBe(300);
         });
+
+        it('IgxTabs: should persist scroll position after changing tabs.', async () => {
+            const grid = fix.componentInstance.grid2;
+            fix.detectChanges();
+            const tab = fix.componentInstance.tabs;
+
+            tab.tabs.toArray()[1].select();
+            await wait(100);
+            fix.detectChanges();
+
+            grid.navigateTo(grid.data.length - 1, grid.columns.length - 1);
+            await wait(100);
+            fix.detectChanges();
+
+            const scrTop = grid.verticalScrollContainer.getScroll().scrollTop;
+            const scrLeft = grid.dataRowList.first.virtDirRow.getScroll().scrollLeft;
+
+            expect(scrTop).not.toBe(0);
+            expect(scrLeft).not.toBe(0);
+
+            tab.tabs.toArray()[0].select();
+            await wait(100);
+            fix.detectChanges();
+
+            tab.tabs.toArray()[1].select();
+            await wait(100);
+            fix.detectChanges();
+            await wait(100);
+
+            // check scrollTop/scrollLeft was persisted.
+            expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(scrTop);
+            expect(grid.dataRowList.first.virtDirRow.getScroll().scrollLeft).toBe(scrLeft);
+        });
     });
 
     describe('IgxGrid - footer section', () => {