Merge pull request #12621 from IgniteUI/mkirkova/feat-12522

Deselect cell with ctrl + click

Author: kdinev

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes for each version of this project will be documented in this
 
 - `IgxGrid`
     - Added new auto-sizing API `recalculateAutoSizes` that recalculates widths of columns that have size set to `auto`. Can be used in scenarios where you want to auto-size the columns again post initialization.
+    - Clicking with the Left Mouse key while holding `Ctrl` on selected cell will deselect the cell.
 - `igxPivotGrid`
     - Adding `aggregatorName` for pivot value configuration as an alternative to setting `aggregator` function. If both are set `aggregatorName` takes precedent. If none are set an error is thrown.
 - `IgxSimpleCombo`

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -973,6 +973,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
                 this.grid.crudService.updateCell(true, event);
             }
             return;
+        } else {
+            this.selectionService.primaryButton = true;
         }
         this.selectionService.pointerDown(this.selectionNode, event.shiftKey, event.ctrlKey);
         this.activate(event);
@@ -1030,11 +1032,16 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
      */
     public activate(event: FocusEvent | KeyboardEvent) {
         const node = this.selectionNode;
-        const shouldEmitSelection = !this.selectionService.isActiveNode(node);
-
+        let shouldEmitSelection = !this.selectionService.isActiveNode(node);
+        
         if (this.selectionService.primaryButton) {
             const currentActive = this.selectionService.activeElement;
-            this.selectionService.activeElement = node;
+            if (this.cellSelectionMode === GridSelectionMode.single && (event as any)?.ctrlKey && this.selected) {
+                this.selectionService.activeElement = null;
+                shouldEmitSelection = true;
+            } else {
+                this.selectionService.activeElement = node;
+            }
             const cancel = this._updateCRUDStatus(event);
             if (cancel) {
                 this.selectionService.activeElement = currentActive;
@@ -1066,8 +1073,13 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
         }
         this.selectionService.primaryButton = true;
         if (this.cellSelectionMode === GridSelectionMode.multiple && this.selectionService.activeElement) {
-            this.selectionService.add(this.selectionService.activeElement, false); // pointer events handle range generation
-            this.selectionService.keyboardStateOnFocus(node, this.grid.rangeSelected, this.nativeElement);
+            if (this.selectionService.isInMap(this.selectionService.activeElement) && (event as any)?.ctrlKey && !(event as any)?.shiftKey) {
+                this.selectionService.remove(this.selectionService.activeElement);
+                shouldEmitSelection = true;
+            } else {
+                this.selectionService.add(this.selectionService.activeElement, false); // pointer events handle range generation
+                this.selectionService.keyboardStateOnFocus(node, this.grid.rangeSelected, this.nativeElement);
+            }
         }
         if (this.grid.isCellSelectable && shouldEmitSelection) {
             this.zone.run(() => this.grid.selected.emit({ cell: this.getCellType(), event }));

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -148,6 +148,9 @@ export class IgxGridNavigationService {
                     this.grid.cdr.detectChanges();
                 });
             } else {
+                if (hasLastActiveNode && !this.grid.selectionService.selected(this.lastActiveNode)) {
+                    return;
+                }
                 const range = {
                     rowStart: this.activeNode.row, rowEnd: this.activeNode.row,
                     columnStart: this.activeNode.column, columnEnd: this.activeNode.column

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

@@ -225,6 +225,34 @@ describe('IgxGrid - Cell selection #grid', () => {
             GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0, 2, 3);
         });
 
+        it('Should be able to select cells correctly when focus is returned to the grid', async() => {
+            const firstCell = grid.gridAPI.get_cell_by_index(1, 'ParentID');
+            const secondCell = grid.gridAPI.get_cell_by_index(2, 'Name');
+
+            UIInteractions.simulateClickAndSelectEvent(firstCell);
+            fix.detectChanges();
+
+            GridSelectionFunctions.verifyCellSelected(firstCell);
+            expect(grid.selectedCells.length).toBe(1);
+
+            UIInteractions.simulateClickAndSelectEvent(firstCell, false, true);
+            fix.detectChanges();
+
+            expect(grid.selectedCells.length).toBe(0);
+            
+            grid.navigation.lastActiveNode = grid.navigation.activeNode;
+            grid.navigation.activeNode = null;
+            fix.detectChanges();
+            grid.tbody.nativeElement.focus();
+            fix.detectChanges();
+            
+            UIInteractions.simulateClickAndSelectEvent(secondCell, false, true);
+            fix.detectChanges();
+            GridSelectionFunctions.verifyCellSelected(firstCell, false);
+            GridSelectionFunctions.verifyCellSelected(secondCell, true);
+            expect(grid.selectedCells.length).toBe(1);
+        });
+
         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');
@@ -341,7 +369,7 @@ describe('IgxGrid - Cell selection #grid', () => {
             ];
             const expectedData2 = [
                 { ID: 475, ParentID: 147, Name: 'Michael Langdon' },
-                { ID: 957, ParentID: 147 },
+                { ID: 957 },
                 { ID: 317, ParentID: 147 }
             ];
 
@@ -362,18 +390,17 @@ describe('IgxGrid - Cell selection #grid', () => {
             GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 2, 0, 1);
             GridSelectionFunctions.verifyCellSelected(thirdCell);
 
-            // Click on a cell in the region and verify it is not changed
+            // Click on a cell in the region and verify it is deselected
             let cell = grid.gridAPI.get_cell_by_index(1, 'ParentID');
             UIInteractions.simulateClickAndSelectEvent(cell, false, true);
             fix.detectChanges();
 
-            GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 2, 0, 1);
-            GridSelectionFunctions.verifyCellSelected(thirdCell);
+            GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 0, 0, 2);
+            GridSelectionFunctions.verifyCellsRegionSelected(grid, 2, 2, 0, 1);
+            GridSelectionFunctions.verifyCellSelected(cell, false);
+            GridSelectionFunctions.verifyCellSelected(grid.gridAPI.get_cell_by_index(1, 'ID'), true);
             expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
             expect(grid.getSelectedData()).toEqual(expectedData2);
-            GridSelectionFunctions.verifySelectedRange(grid, 0, 2, 0, 1, 0, 3);
-            GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 2, 2, 1, 3);
-            GridSelectionFunctions.verifySelectedRange(grid, 1, 1, 1, 1, 2, 3);
 
             // Click on a cell without holding Ctrl
             cell = grid.gridAPI.get_cell_by_index(0, 'ID');
@@ -3155,6 +3182,25 @@ describe('IgxGrid - Cell selection #grid', () => {
             GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0);
         });
 
+        it('Should deselect a selected cell with Ctrl + click', () => {
+            const selectionChangeSpy = spyOn<any>(grid.selected, 'emit').and.callThrough();
+            const firstCell = grid.gridAPI.get_cell_by_index(1, 'ParentID');
+
+            // Click on a cell
+            UIInteractions.simulateClickAndSelectEvent(firstCell);
+            fix.detectChanges();
+            GridSelectionFunctions.verifyCellSelected(firstCell);
+            expect(grid.selectedCells.length).toBe(1);
+            expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
+
+            // Click on same cell holding Ctrl
+            UIInteractions.simulateClickAndSelectEvent(firstCell, false, true);
+            fix.detectChanges();
+            GridSelectionFunctions.verifyCellSelected(firstCell, false);
+            expect(grid.selectedCells.length).toBe(0);
+            expect(selectionChangeSpy).toHaveBeenCalledTimes(2);
+        });
+
         it('When when navigate with arrow keys cell selection should be changed', () => {
             const selectionChangeSpy = spyOn<any>(grid.selected, 'emit').and.callThrough();
             let cell = grid.gridAPI.get_cell_by_index(1, 'Name');

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

@@ -336,7 +336,7 @@ export class IgxGridSelectionService {
             return true;
         }
 
-        if (this.pointerEventInGridBody) {
+        if (this.pointerEventInGridBody && this.isActiveNode(node)) {
             this.add(node);
         }
         return false;