fix(grid): Fix filtering UI mousedown event handling

IgniteUI · Jul 3, 2024 · f7ce350 · f7ce350
1 parent a1a2407
commit f7ce350
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
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
@@ -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
@@ -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();
+        }
     }
 
     /**