fix(grid): Preventing rangeSelection from element inside cellTemplate

Author: Ivan Kitanov

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

@@ -5,7 +5,8 @@ import {
     SelectionWithScrollsComponent,
     SelectionWithTransactionsComponent,
     CellSelectionNoneComponent,
-    CellSelectionSingleComponent
+    CellSelectionSingleComponent,
+    IgxGridCellTemplateForRangeSelectionComponent
 } 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,
+                IgxGridCellTemplateForRangeSelectionComponent
             ]
         }).compileComponents();
     }));
@@ -256,6 +258,23 @@ 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(IgxGridCellTemplateForRangeSelectionComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.grid;
+            detect = () => grid.cdr.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();
+            span.click();
+            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

@@ -1414,6 +1414,26 @@ export class IgxGridRowEditingWithoutEditableColumnsComponent extends BasicGridC
     public override data = SampleTestData.foodProductData();
 }
 
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="700px" height="400px"  [cellSelection]="'multiple'">
+        <igx-column field="ProductID" header="Product ID">
+            <ng-template igxCell let-cell="cell" let-val>
+               <span style="background-color: red;">{{val}}</span>
+                <br>
+                {{val}}
+            </ng-template>
+        </igx-column>
+        <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>
+    </igx-grid>`,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
+})
+export class IgxGridCellTemplateForRangeSelectionComponent extends BasicGridComponent {
+    public override data = SampleTestData.foodProductData();
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" [primaryKey]="'ID'" width="700px" height="400px" [rowEditable]="true" [moving]="true">