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..ae2779d20e3 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, + 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,31 @@ 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(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(); + + UIInteractions.simulateClickAndSelectEvent(span); + 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..7c29ba15f5d 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 @@ -1407,11 +1407,18 @@ export class IgxGridRowEditingComponent extends BasicGridComponent { + + val +
+ {{val}} +
`, imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class IgxGridRowEditingWithoutEditableColumnsComponent extends BasicGridComponent { public override data = SampleTestData.foodProductData(); + @ViewChild('customCell', { static: true }) + public customCell!: TemplateRef; } @Component({