Merge branch 'master' into rkaraivanov/remove-raf-81x

Author: rkaraivanov

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

@@ -455,14 +455,17 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         const cell = cells[0];
         const childContainer = this.grid.nativeElement.parentNode.parentNode;
         const scrTop = this.grid.parent.verticalScrollContainer.getVerticalScroll().scrollTop;
+        const maxScroll = this.grid.parent.verticalScrollContainer.getVerticalScroll().scrollHeight - this.grid.parent.calcHeight;
         const dc = childContainer.parentNode.parentNode;
         const scrWith = parseInt(dc.style.top, 10);
-        if (scrTop === 0 || scrWith === 0) {
+        const parentRowOffset = childContainer.parentNode.offsetTop + this.grid.nativeElement.offsetTop +
+            scrWith;
+        if ((scrTop === 0 && parentRowOffset < 0 ) || parentRowOffset === 0 || (scrTop === maxScroll && parentRowOffset > 0)) {
             // cell is in view
             cell.focus({ preventScroll: true });
         } else {
             // scroll parent so that cell is in view
-            this.scrollGrid(this.grid.parent, scrWith, () => cell.focus({ preventScroll: true }));
+            this.scrollGrid(this.grid.parent, parentRowOffset, () => cell.focus({ preventScroll: true }));
         }
     }
 

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

@@ -672,6 +672,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
 
             const childGrids = this.getChildGrids(true);
             childGrids.forEach((grid) => {
+                if (grid.isPercentWidth) {
+                    grid.reflow();
+                }
                 grid.updateScrollPosition();
             });
         }

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

@@ -274,7 +274,8 @@ describe('IgxHierarchicalGrid Basic Navigation', () => {
         expect(childCell.rowIndex).toBe(0);
 
         const currScrTop = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollTop;
-        expect(currScrTop).toBeLessThanOrEqual(childGrid.rowHeight + 1);
+        const childGridOffset = childGrid.nativeElement.offsetTop;
+        expect(currScrTop).toBeLessThanOrEqual(childGrid.rowHeight + 1 + childGridOffset);
     }));
 
     it('should allow navigating to bottom in child grid when child grid target row moves outside the parent view port.', (async () => {
@@ -349,7 +350,29 @@ describe('IgxHierarchicalGrid Basic Navigation', () => {
         expect(childFirstRowCell.rowIndex).toBe(0);
 
         const currScrTop = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollTop;
-        expect(currScrTop).toBeLessThanOrEqual(childGrid.rowHeight + 1);
+        const childGridOffset = childGrid.nativeElement.offsetTop;
+        expect(currScrTop).toBeLessThanOrEqual(childGrid.rowHeight + 1 + childGridOffset);
+    }));
+
+    it('should scroll top of child grid into view when pressing Ctrl + Arrow Up when cell is selected in it.', (async () => {
+        hierarchicalGrid.verticalScrollContainer.scrollTo(3);
+        await wait(100);
+        fixture.detectChanges();
+
+        const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[3];
+        const childLastRowCell =  childGrid.dataRowList.toArray()[9].cells.toArray()[0];
+        childLastRowCell.nativeElement.focus();
+        fixture.detectChanges();
+        childLastRowCell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', ctrlKey: true }));
+        await wait(100);
+        fixture.detectChanges();
+        const childFirstRowCell =  childGrid.dataRowList.toArray()[0].cells.toArray()[0];
+        expect(childFirstRowCell.selected).toBe(true);
+        expect(childFirstRowCell.columnIndex).toBe(0);
+        expect(childFirstRowCell.rowIndex).toBe(0);
+
+        const currScrTop = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollTop;
+        expect(currScrTop).toBeGreaterThanOrEqual(2000);
     }));
 
     it('when navigating down from parent into child should scroll child grid to top and start navigation from first row.', (async () => {

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

@@ -268,6 +268,24 @@ describe('Basic IgxHierarchicalGrid', () => {
         expect(hierarchicalGrid.nativeElement.classList.contains('igx-grid--compact')).toBe(true);
         expect(childGrid.displayDensity).toBe(DisplayDensity.compact);
     }));
+
+    it('when child width is in percents its width should be update if parent width changes while parent row is collapsed. ', async () => {
+        const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        UIInteractions.clickElement(row.expander);
+        fixture.detectChanges();
+        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).toBeLessThan(3);
+        UIInteractions.clickElement(row.expander);
+        fixture.detectChanges();
+        fixture.componentInstance.width = '300px';
+        fixture.detectChanges();
+        await wait(30);
+        fixture.detectChanges();
+        UIInteractions.clickElement(row.expander);
+        fixture.detectChanges();
+        expect(childGrid.calcWidth - 170).toBeLessThan(3);
+    });
 });
 
 describe('IgxHierarchicalGrid Row Islands', () => {
@@ -944,7 +962,7 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios', () => {
 @Component({
     template: `
     <igx-hierarchical-grid #grid1 [data]="data"
-     [autoGenerate]="false" [height]="'400px'" [width]="'500px'" #hierarchicalGrid>
+     [autoGenerate]="false" [height]="'400px'" [width]="width" #hierarchicalGrid>
      <igx-column field="ID"></igx-column>
      <igx-column field="ProductName"></igx-column>
         <igx-row-island [key]="'childData'" [autoGenerate]="false" #rowIsland>
@@ -960,6 +978,7 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios', () => {
 })
 export class IgxHierarchicalGridTestBaseComponent {
     public data;
+    public width = '500px';
     @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hgrid: IgxHierarchicalGridComponent;
     @ViewChild('rowIsland', { read: IgxRowIslandComponent, static: true }) public rowIsland: IgxRowIslandComponent;
     @ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true }) public rowIsland2: IgxRowIslandComponent;