fix(hierarchical-grid): hide child row editing overlay on scroll - master

projects/igniteui-angular/grids/core/src/grid.common.ts

@@ -63,6 +63,64 @@ export class RowEditPositionStrategy extends ConnectedPositioningStrategy {
 
         super.position(contentElement, { width: targetElement.clientWidth, height: targetElement.clientHeight },
             document, initialCall, targetElement);
+
+        this.updateContentClip(contentElement);
+    }
+
+    private updateContentClip(contentElement: HTMLElement): void {
+        const container = this.settings.container;
+
+        if (!container) {
+            return;
+        }
+
+        const clippingRect = this.getClippingRect(container);
+        const contentRect = contentElement.getBoundingClientRect();
+
+        const top = Math.round(Math.max(clippingRect.top - contentRect.top, 0));
+        const right = Math.round(Math.max(contentRect.right - clippingRect.right, 0));
+        const bottom = Math.round(Math.max(contentRect.bottom - clippingRect.bottom, 0));
+        const left = Math.round(Math.max(clippingRect.left - contentRect.left, 0));
+
+        const fullyClipped = top >= contentRect.height || bottom >= contentRect.height ||
+            left >= contentRect.width || right >= contentRect.width;
+
+        contentElement.style.clipPath = fullyClipped ? 'inset(100%)' :
+            (top || right || bottom || left ? `inset(${top}px ${right}px ${bottom}px ${left}px)` : '');
+
+        contentElement.style.pointerEvents = fullyClipped ? 'none' : '';
+        contentElement.style.visibility = '';
+    }
+
+    private getClippingRect(element: HTMLElement): Pick<DOMRect, 'top' | 'right' | 'bottom' | 'left'> {
+        const document = element.ownerDocument;
+        const rect = element.getBoundingClientRect();
+        const clippingRect = { top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left };
+
+        let parent = element.parentElement;
+
+        while (parent && parent !== document.body && parent !== document.documentElement) {
+            const style = getComputedStyle(parent);
+            const overflow = `${style.overflow}${style.overflowX}${style.overflowY}`;
+
+            if (/(auto|scroll|hidden|clip)/.test(overflow)) {
+                const parentRect = parent.getBoundingClientRect();
+
+                clippingRect.top = Math.max(clippingRect.top, parentRect.top);
+                clippingRect.right = Math.min(clippingRect.right, parentRect.right);
+                clippingRect.bottom = Math.min(clippingRect.bottom, parentRect.bottom);
+                clippingRect.left = Math.max(clippingRect.left, parentRect.left);
+            }
+
+            parent = parent.parentElement;
+        }
+
+        return {
+            top: Math.max(clippingRect.top, 0),
+            right: Math.min(clippingRect.right, document.documentElement.clientWidth),
+            bottom: Math.min(clippingRect.bottom, document.documentElement.clientHeight),
+            left: Math.max(clippingRect.left, 0)
+        };
     }
 
     /**

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

@@ -783,6 +783,51 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             expect(childGrids[1].height).toBe('200px');
         });
 
+        it('should hide child row editing overlay when parent scroll moves child row out of view', () => {
+            hierarchicalGrid.getRowByIndex(0).expanded = true;
+            fixture.detectChanges();
+
+            const childGrid = hierarchicalGrid.gridAPI.getChildGrids()[0] as IgxHierarchicalGridComponent;
+            childGrid.primaryKey = 'ID';
+            childGrid.rowEditable = true;
+            fixture.detectChanges();
+
+            const row = childGrid.gridAPI.get_row_by_index(0);
+            spyOnProperty(childGrid.crudService, 'rowInEditMode', 'get').and.returnValue(row);
+            childGrid.openRowOverlay(row.key);
+            fixture.detectChanges();
+
+            expect(childGrid.rowEditingOverlay.collapsed).toBeFalse();
+
+            const parentTbody = hierarchicalGrid.tbody.nativeElement.parentElement;
+            const childTbody = childGrid.tbody.nativeElement.parentElement;
+            const overlayContent = childGrid.rowEditingOverlay.element.parentElement;
+
+            parentTbody.style.overflow = 'hidden';
+            childTbody.style.overflow = 'hidden';
+            spyOn(parentTbody, 'getBoundingClientRect').and.returnValue({
+                top: 0, right: 500, bottom: 200, left: 0
+            } as DOMRect);
+            spyOn(childTbody, 'getBoundingClientRect').and.returnValue({
+                top: 0, right: 500, bottom: 200, left: 0
+            } as DOMRect);
+            spyOn(childGrid.tbody.nativeElement, 'getBoundingClientRect').and.returnValue({
+                top: -100, right: 500, bottom: 500, left: 0
+            } as DOMRect);
+            spyOn(row.nativeElement, 'getBoundingClientRect').and.returnValue({
+                top: -120, right: 500, bottom: -80, left: 0
+            } as DOMRect);
+            spyOn(overlayContent, 'getBoundingClientRect').and.returnValue({
+                top: -80, right: 500, bottom: -32, left: 0, width: 500, height: 48
+            } as DOMRect);
+
+            childGrid.rowEditingOverlay.reposition();
+            fixture.detectChanges();
+
+            expect(overlayContent.style.clipPath).toBe('inset(100%)');
+            expect(overlayContent.style.pointerEvents).toBe('none');
+        });
+
         it('Should apply runtime option changes to all related child grids (both existing and not yet initialized).', () => {
             const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
             UIInteractions.simulateClickAndSelectEvent(row.expander);