Merge branch '19.2.x' into bpachilova/icon-aria-hidden-16008-19.2.x

ddaribo · web-flow · commit d0f7c3ed967d · 2025-08-19T14:26:10.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
@@ -11,7 +11,7 @@ import { MultiColumnHeadersComponent } from '../../test-utils/grid-samples.spec'
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective } from '../columns/templates.directive';
 import { IgxAvatarComponent } from '../../avatar/avatar.component';
-import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api';
+import { IColumnResizeEventArgs, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent } from '../public_api';
 import { Size } from "../common/enums";
 import { setElementSize } from '../../test-utils/helper-utils.spec';
 import { IgxColumnResizerDirective } from '../resizing/resizer.directive';
@@ -899,6 +899,65 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(firstRowCells.length).toEqual(11);
         }));
     });
+
+    describe('Resizer tests: ', () => {
+        let fixture: ComponentFixture<any>;
+        let grid: IgxGridComponent;
+
+        beforeEach(fakeAsync(() => {
+            fixture = TestBed.createComponent(ResizableColumnsWithToolbarComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+        }));
+
+        it('should align the resizer top with the grid header top', fakeAsync(() => {
+            grid.nativeElement.style.marginTop = '40px';
+            fixture.detectChanges();
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            const headerResArea = GridFunctions.getHeaderResizeArea(headers[0]).nativeElement;
+
+            const headerRectTop = headerResArea.getBoundingClientRect().top;
+
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, 100, 15);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            expect(resizer).toBeDefined();
+
+            const resizerRectTop = resizer.getBoundingClientRect().top;
+            UIInteractions.simulateMouseEvent('mousemove', resizer, 250, 15);
+            UIInteractions.simulateMouseEvent('mouseup', resizer, 250, 15);
+            fixture.detectChanges();
+
+
+            expect(Math.abs(resizerRectTop - headerRectTop)).toBeLessThanOrEqual(1);
+        }));
+
+        it('should align the resizer top with the grid header top when grid is scaled', fakeAsync(() => {
+            grid.nativeElement.style.transform = 'scale(0.6)';
+            fixture.detectChanges();
+
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            const headerResArea = GridFunctions.getHeaderResizeArea(headers[1]).nativeElement;
+            const headerRectTop = headerResArea.getBoundingClientRect().top;
+
+            // Trigger resize to show resizer
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, 153, 0);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            expect(resizer).toBeDefined();
+
+            const resizerRectTop = resizer.getBoundingClientRect().top;
+
+            UIInteractions.simulateMouseEvent('mouseup', resizer, 200, 5);
+            fixture.detectChanges();
+
+            expect(Math.abs(resizerRectTop - headerRectTop)).toBeLessThanOrEqual(1);
+        }));
+    });
 });
 
 @Component({
@@ -911,6 +970,18 @@ export class ResizableColumnsComponent {
     public data = SampleTestData.personIDNameRegionData();
 }
 
+@Component({
+    template: GridTemplateStrings.declareGrid(`width="500px" height="300px"`, ``,
+        '<igx-grid-toolbar><igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title></igx-grid-toolbar>' +
+        ColumnDefinitions.resizableThreeOfFour),
+    imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent]
+})
+export class ResizableColumnsWithToolbarComponent {
+    @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
+
+    public data = SampleTestData.personIDNameRegionData();
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid(`width="618px" height="600px"`, ``, `<igx-column [field]="'Released'" [pinned]="true" width="100px" dataType="boolean" [resizable]="true"></igx-column>
         <igx-column [field]="'ReleaseDate'" [pinned]="true" width="100px" dataType="date" [resizable]="true"
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts
@@ -91,12 +91,12 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple
     private _clearAllHighlights() {
         [this._rootGrid, ...this._rootGrid.getChildGrids(true)].forEach(grid => {
             if (grid !== this.grid && grid.navigation.activeNode) {
+                grid.selectionService.activeElement = null;
                 grid.navigation.clearActivation();
                 grid.selectionService.initKeyboardState();
                 grid.selectionService.clear();
             }
 
-            grid.selectionService.activeElement = null;
             grid.nativeElement.classList.remove('igx-grid__tr--highlighted');
             grid.highlightedRowID = null;
             grid.cdr.markForCheck();
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts
@@ -78,12 +78,19 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             expect(fCell.selected).toBeFalsy();
 
             // select parent cell
+            const parentSpy = spyOn<any>(hierarchicalGrid.selected, 'emit').and.callThrough();
             firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
             fCell = firstRow.cells.toArray()[0];
             GridFunctions.focusCell(fix, fCell);
             fix.detectChanges();
             expect(fChildCell.selected).toBeFalsy();
             expect(fCell.selected).toBeTruthy();
+            expect(parentSpy).toHaveBeenCalledTimes(1);
+
+            GridFunctions.focusCell(fix, fCell);
+            fix.detectChanges();
+            expect(fCell.selected).toBeTruthy();
+            expect(parentSpy).toHaveBeenCalledTimes(1);
         });
 
         it('should be able to set cellSelection mode per grid', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts
@@ -8,7 +8,7 @@ import {
     OnDestroy
 } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { debounceTime, map, takeUntil } from 'rxjs/operators';
 import { ColumnType } from '../common/grid.interface';
 import { IgxColumnResizingService } from './resizing.service';
 
@@ -69,19 +69,23 @@ export class IgxResizeHandleDirective implements AfterViewInit, OnDestroy {
     public ngAfterViewInit() {
         if (!this.column.columnGroup && this.column.resizable) {
             this.zone.runOutsideAngular(() => {
-                fromEvent(this.element.nativeElement, 'mousedown').pipe(
+                fromEvent<MouseEvent>(this.element.nativeElement, 'mousedown').pipe(
+                    map((event) => ({
+                        event,
+                        // Preserves the original 'event.target' in a shadow DOM context.
+                        target: event.target as HTMLElement
+                    })),
                     debounceTime(this.DEBOUNCE_TIME),
                     takeUntil(this.destroy$)
-                ).subscribe((event: MouseEvent) => {
-
+                ).subscribe(({ event, target }: { event: MouseEvent; target: HTMLElement }) => {
                     if (this._dblClick) {
                         this._dblClick = false;
                         return;
                     }
 
                     if (event.button === 0) {
                         this._onResizeAreaMouseDown(event);
-                        this.column.grid.resizeLine.resizer.onMousedown(event);
+                        this.column.grid.resizeLine.resizer.onMousedown(event, target);
                     }
                 });
             });
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts
@@ -115,7 +115,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
         this.resizeEnd.complete();
     }
 
-    public onMousedown(event: MouseEvent) {
+    public onMousedown(event: MouseEvent, resizeHandleTarget: HTMLElement) {
         event.preventDefault();
         const parent = this.element.nativeElement.parentElement.parentElement;
         const parentRectWidth = parent.getBoundingClientRect().width;
@@ -124,7 +124,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
             this._ratio = parentRectWidth / parentComputedWidth;
         }
         this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;
-        this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top;
+        this.top = (resizeHandleTarget.getBoundingClientRect().top - parent.getBoundingClientRect().top) / this._ratio;
 
         this.resizeStart.next(event);
     }

Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {`
`115`	`115`	`this.resizeEnd.complete();`
`116`	`116`	`}`
`117`	`117`
`118`		`- public onMousedown(event: MouseEvent) {`
	`118`	`+ public onMousedown(event: MouseEvent, resizeHandleTarget: HTMLElement) {`
`119`	`119`	`event.preventDefault();`
`120`	`120`	`const parent = this.element.nativeElement.parentElement.parentElement;`
`121`	`121`	`const parentRectWidth = parent.getBoundingClientRect().width;`
`@@ -124,7 +124,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {`
`124`	`124`	`this._ratio = parentRectWidth / parentComputedWidth;`
`125`	`125`	`}`
`126`	`126`	`this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;`
`127`		`- this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top;`
	`127`	`+ this.top = (resizeHandleTarget.getBoundingClientRect().top - parent.getBoundingClientRect().top) / this._ratio;`
`128`	`128`
`129`	`129`	`this.resizeStart.next(event);`
`130`	`130`	`}`