feat(grid): add deselect for single selection

Author: MonikaKirkova

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

@@ -1036,7 +1036,12 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
 
         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;

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

@@ -136,9 +136,11 @@ export class IgxGridNavigationService {
             this.activeNode = null;
             return;
         }
-        if ((!this.activeNode || !Object.keys(this.activeNode).length || this.activeNode.row < 0 || this.activeNode.row > gridRows - 1) &&
-            this.grid.selectionService.isInMap(this.lastActiveNode)) {
+        if (!this.activeNode || !Object.keys(this.activeNode).length || this.activeNode.row < 0 || this.activeNode.row > gridRows - 1) {
             const hasLastActiveNode = Object.keys(this.lastActiveNode).length;
+            if (hasLastActiveNode && this.grid.cellSelection !== GridSelectionMode.none && !this.grid.selectionService.isInMap(this.lastActiveNode)) {
+                return;
+            }
             const shouldClearSelection = hasLastActiveNode && (this.lastActiveNode.row < 0 || this.lastActiveNode.row > gridRows - 1);
             this.setActiveNode(this.lastActiveNode.row >= 0 && this.lastActiveNode.row < gridRows ?
                 this.firstVisibleNode(this.lastActiveNode.row) : this.firstVisibleNode());

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

@@ -3154,6 +3154,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');