diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 2c3cdba1ad5..3fac2a87dad 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -2751,6 +2751,30 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW)); expect(filterUIRow).toBeNull('Default filter template was found on a column with custom filtering.'); })); + + it('Should not prevent mousedown event when target is within the filter cell template', fakeAsync(() => { + const filterCell = GridFunctions.getFilterCell(fix, 'ProductName'); + const input = filterCell.query(By.css('input')).nativeElement; + + const mousedownEvent = new MouseEvent('mousedown', { bubbles: true }); + const preventDefaultSpy = spyOn(mousedownEvent, 'preventDefault'); + input.dispatchEvent(mousedownEvent, { bubbles: true }); + fix.detectChanges(); + + expect(preventDefaultSpy).not.toHaveBeenCalled(); + })); + + it('Should prevent mousedown event when target is filter cell or its parent elements', fakeAsync(() => { + const filteringCells = fix.debugElement.queryAll(By.css(FILTER_UI_CELL)); + const firstCell = filteringCells[0].nativeElement; + + const mousedownEvent = new MouseEvent('mousedown', { bubbles: true }); + const preventDefaultSpy = spyOn(mousedownEvent, 'preventDefault'); + firstCell.dispatchEvent(mousedownEvent); + fix.detectChanges(); + + expect(preventDefaultSpy).toHaveBeenCalled(); + })); }); describe(null, () => { @@ -2827,6 +2851,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { expect(grid.rowList.length).toEqual(1); })); + }); describe('Filtering events', () => { diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts index a13c75327b6..321940c47b6 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts @@ -262,8 +262,12 @@ export class IgxGridHeaderGroupComponent implements DoCheck { */ @HostListener('mousedown', ['$event']) public onMouseDown(event: MouseEvent): void { - // hack for preventing text selection in IE and Edge while dragging the resize element - event.preventDefault(); + if (!this.grid.allowFiltering || + (event.composedPath().findIndex(el => + (el as Element).tagName?.toLowerCase() === 'igx-grid-filtering-cell') < 1)) { + // Hack for preventing text selection in IE and Edge while dragging the resize element + event.preventDefault(); + } } /**