Preventing range selection from triggering when element inside CellTemplate is clicked - 19.2.x

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

@@ -5,7 +5,8 @@ import {
     SelectionWithScrollsComponent,
     SelectionWithTransactionsComponent,
     CellSelectionNoneComponent,
-    CellSelectionSingleComponent
+    CellSelectionSingleComponent,
+    IgxGridRowEditingWithoutEditableColumnsComponent
 } from '../../test-utils/grid-samples.spec';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
@@ -26,7 +27,8 @@ describe('IgxGrid - Cell selection #grid', () => {
                 SelectionWithScrollsComponent,
                 SelectionWithTransactionsComponent,
                 CellSelectionNoneComponent,
-                CellSelectionSingleComponent
+                CellSelectionSingleComponent,
+                IgxGridRowEditingWithoutEditableColumnsComponent
             ]
         }).compileComponents();
     }));
@@ -256,6 +258,35 @@ describe('IgxGrid - Cell selection #grid', () => {
             expect(grid.selectedCells.length).toBe(1);
         });
 
+        it('Should not trigger range selection when CellTemplate is used and the user clicks on element inside it', () => {
+            fix = TestBed.createComponent(IgxGridRowEditingWithoutEditableColumnsComponent);
+            fix.detectChanges();
+
+            const component = fix.componentInstance;
+            grid = fix.componentInstance.grid;
+
+            expect(component.customCell).toBeDefined();
+
+            const column = grid.getColumnByName('ProductID');
+            column.bodyTemplate = component.customCell;
+            fix.detectChanges();
+
+            const selectionChangeSpy = spyOn<any>(grid.rangeSelected, 'emit').and.callThrough();
+            const cell = grid.gridAPI.get_cell_by_index(1, 'ProductID');
+            const cellElement = cell.nativeElement;
+            const span = cellElement.querySelector('span');
+
+            expect(span).not.toBeNull();
+
+
+            const pointerDown = new PointerEvent('pointerdown', { bubbles: true });
+            const pointerUp = new PointerEvent('pointerup', { bubbles: true });
+            span.dispatchEvent(pointerDown);
+            span.dispatchEvent(pointerUp);
+            fix.detectChanges();
+            expect(selectionChangeSpy).not.toHaveBeenCalled();
+        });
+
         it('Should be able to select range when click on a cell and hold Shift key and click on another Cell', () => {
             const firstCell = grid.gridAPI.get_cell_by_index(3, 'HireDate');
             const secondCell = grid.gridAPI.get_cell_by_index(1, 'ID');

projects/igniteui-angular/src/lib/grids/selection/selection.service.ts

@@ -637,7 +637,7 @@ export class IgxGridSelectionService {
         if (this.areEqualCollections(currSelection, newSelection)) {
             return;
         }
-        
+
         const args: IRowSelectionEventArgs = {
             owner: this.grid,
             oldSelection: currSelection,
@@ -857,8 +857,7 @@ export class IgxGridSelectionService {
         this.pointerEventInGridBody = false;
         this.grid.document.body.removeEventListener('pointerup', this.pointerOriginHandler);
 
-        const targetTagName = event.target.tagName.toLowerCase();
-        if (targetTagName !== 'igx-grid-cell' && targetTagName !== 'igx-tree-grid-cell') {
+        if (!event.target.closest('igx-grid-cell') && !event.target.closest('igx-tree-grid-cell')) {
             this.pointerUp(this._lastSelectedNode, this.grid.rangeSelected, true);
         }
     };

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1407,11 +1407,18 @@ export class IgxGridRowEditingComponent extends BasicGridComponent {
         <igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" [editable]="true" width="100px"></igx-column>
         <igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="150px"></igx-column>
         <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px" [editable]="false"></igx-column>
+        <ng-template #customCell igxCell let-cell="cell" let-val>
+            <span style="background-color: red;">val</span>
+            <br>
+            {{val}}
+        </ng-template>
     </igx-grid>`,
     imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
 })
 export class IgxGridRowEditingWithoutEditableColumnsComponent extends BasicGridComponent {
     public override data = SampleTestData.foodProductData();
+    @ViewChild('customCell', { static: true })
+    public customCell!: TemplateRef<any>;
 }
 
 @Component({