diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts index 9c7501966b3..07d0014609f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts +++ b/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(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'); diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts index 83287824d16..49b0e4f54f9 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts +++ b/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); } }; diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 784f63e9965..0d6751063fd 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/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: ` + + + + {{val}} +
+ {{val}} +
+
+ + + +
`, + imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class IgxGridCellTemplateForRangeSelectionComponent extends BasicGridComponent { + public override data = SampleTestData.foodProductData(); +} + @Component({ template: `