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/hierarchical-grid/hierarchical-grid.selection.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts index 910a4ae8648..39ad035c2ff 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts @@ -9,7 +9,8 @@ import { IgxHierarchicalGridRowSelectionComponent, IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent, IgxHierarchicalGridCustomSelectorsComponent, - IgxHierarchicalGridRowSelectionNoTransactionsComponent + IgxHierarchicalGridRowSelectionNoTransactionsComponent, + IgxHierGridExternalAdvancedFilteringComponent } from '../../test-utils/hierarchical-grid-components.spec'; import { GridSelectionFunctions, GridFunctions } from '../../test-utils/grid-functions.spec'; import { GridSelectionMode, Size } from '../common/enums'; @@ -33,7 +34,8 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { IgxHierarchicalGridRowSelectionComponent, IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent, IgxHierarchicalGridCustomSelectorsComponent, - IgxHierarchicalGridRowSelectionNoTransactionsComponent + IgxHierarchicalGridRowSelectionNoTransactionsComponent, + IgxHierGridExternalAdvancedFilteringComponent, ] }).compileComponents(); })) @@ -474,6 +476,30 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 0, 0, 2, 2); })); + it('Should not trigger range selection when CellTemplate is used and the user clicks on element inside it', () => { + fix = TestBed.createComponent(IgxHierGridExternalAdvancedFilteringComponent); + fix.detectChanges(); + + const component = fix.componentInstance; + hierarchicalGrid = fix.componentInstance.hgrid; + + expect(component.customCell).toBeDefined(); + + const column = hierarchicalGrid.getColumnByName('ID'); + column.bodyTemplate = component.customCell; + fix.detectChanges(); + + const selectionChangeSpy = spyOn(hierarchicalGrid.rangeSelected, 'emit').and.callThrough(); + const cell = hierarchicalGrid.gridAPI.get_cell_by_index(0, 'ID'); + const cellElement = cell.nativeElement; + const span = cellElement.querySelector('span'); + + expect(span).not.toBeNull(); + + UIInteractions.simulateClickAndSelectEvent(span); + fix.detectChanges(); + expect(selectionChangeSpy).not.toHaveBeenCalled(); + }); }); describe('Row Selection', () => { 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..e97cc8a0f2a 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,10 @@ 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') { + const gridCellSelectors = ['igx-grid-cell', 'igx-hierarchical-grid-cell', 'igx-tree-grid-cell']; + const isInsideGridCell = gridCellSelectors.some(selector => event.target.closest(selector)); + + if (!isInsideGridCell) { this.pointerUp(this._lastSelectedNode, this.grid.rangeSelected, true); } }; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts index 305eb6319ae..f47616bc290 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts @@ -964,6 +964,27 @@ describe('IgxTreeGrid - Selection #tGrid', () => { expect(treeGrid.selectedCells[0] instanceof IgxGridCell).toBe(true); expect(treeGrid.selectedCells[0].value).toBe(19); }); + + it('Should not trigger range selection when CellTemplate is used and the user clicks on element inside it', () => { + const component = fix.componentInstance; + + expect(component.customCell).toBeDefined(); + + const column = treeGrid.getColumnByName('ID'); + column.bodyTemplate = component.customCell; + fix.detectChanges(); + + const selectionChangeSpy = spyOn(treeGrid.rangeSelected, 'emit').and.callThrough(); + const cell = treeGrid.gridAPI.get_cell_by_index(0, 'ID'); + const cellElement = cell.nativeElement; + const span = cellElement.querySelector('span'); + + expect(span).not.toBeNull(); + + UIInteractions.simulateClickAndSelectEvent(span); + fix.detectChanges(); + expect(selectionChangeSpy).not.toHaveBeenCalled(); + }); }); describe('Cell/Row Selection With Row Editing', () => { 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({ diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts index fa3ccde83a6..8400b60b0d1 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit } from '@angular/core'; +import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core'; import { SampleTestData } from './sample-test-data.spec'; import { ColumnType, IPinningConfig, IgxAdvancedFilteringDialogComponent, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/public_api'; import { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/hierarchical-grid.component'; @@ -460,6 +460,11 @@ export class IgxHierarchicalGridActionStripComponent extends IgxHierarchicalGrid + + val +
+ {{val}} +
`, @@ -468,7 +473,8 @@ export class IgxHierarchicalGridActionStripComponent extends IgxHierarchicalGrid export class IgxHierGridExternalAdvancedFilteringComponent extends IgxHierarchicalGridTestBaseComponent { @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public override hgrid: IgxHierarchicalGridComponent; - + @ViewChild('customCell', { static: true }) + public customCell!: TemplateRef; public override data = SampleTestData.generateHGridData(5, 3); } diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts index 0c44149bca4..122aaa8a80f 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit } from '@angular/core'; +import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core'; import { IgxTreeGridComponent } from '../grids/tree-grid/tree-grid.component'; import { SampleTestData } from './sample-test-data.spec'; import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult, IPinningConfig, IgxColumnComponent } from '../grids/public_api'; @@ -191,6 +191,11 @@ export class IgxTreeGridExpandingComponent { + + val +
+ {{val}} +
`, imports: [IgxTreeGridComponent, IgxColumnComponent, IgxPaginatorComponent] @@ -198,6 +203,8 @@ export class IgxTreeGridExpandingComponent { export class IgxTreeGridCellSelectionComponent { @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent; public data = SampleTestData.employeeTreeData(); + @ViewChild('customCell', { static: true }) + public customCell!: TemplateRef; } @Component({