Merge branch '8.1.x' into tzhelev/fix-5238-8.1.x

Author: tachojelev

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

@@ -372,6 +372,11 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
                     }
                 });
             });
+            this.parent.verticalScrollContainer.onDataChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
+                requestAnimationFrame(() => {
+                        this.updateSizes();
+                });
+            });
             this.childLayoutKeys = this.parentIsland.children.map((item) => item.key);
         }
 
@@ -380,6 +385,16 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
             this.toolbarCustomContentTemplates;
     }
 
+    private updateSizes() {
+        if (!this._destroyed && document.body.contains(this.nativeElement) && this.isPercentWidth) {
+            this.reflow();
+
+            this.hgridAPI.getChildGrids(false).forEach((grid) => {
+                grid.updateSizes();
+            });
+        }
+    }
+
     public get outletDirective() {
         return this.rootGrid._outletDirective;
     }

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

@@ -10,6 +10,7 @@ import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
 import { By } from '@angular/platform-browser';
 import { IgxChildGridRowComponent } from './child-grid-row.component';
 import { DisplayDensity } from '../../core/displayDensity';
+import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 
 describe('Basic IgxHierarchicalGrid', () => {
     configureTestSuite();
@@ -333,6 +334,24 @@ describe('Basic IgxHierarchicalGrid', () => {
         fixture.detectChanges();
         expect(childGrid.calcWidth - 170).toBeLessThan(3);
     });
+
+    it('child grid width should be recalculated if parent no longer shows scrollbar.', async () => {
+        hierarchicalGrid.height = '1000px';
+        fixture.detectChanges();
+        hierarchicalGrid.filter('ProductName', 'A0', IgxStringFilteringOperand.instance().condition('contains'), true);
+        fixture.detectChanges();
+        const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        UIInteractions.clickElement(row.expander);
+        const childGrids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+        const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+        expect(childGrid.calcWidth - 370 - childGrid.scrollWidth).toBeLessThanOrEqual(5);
+
+        hierarchicalGrid.clearFilter();
+        fixture.detectChanges();
+        await wait(30);
+
+        expect(childGrid.calcWidth - 370 ).toBeLessThan(3);
+    });
 });
 
 describe('IgxHierarchicalGrid Row Islands', () => {