Merge pull request #7476 from IgniteUI/ddincheva/bugFixs9.1

Clicking a grid cell should not  scrolls the grid to the top

Author: rkaraivanov

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

@@ -588,14 +588,12 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
 
     private addPointerListeners(selection) {
         if (selection !== GridSelectionMode.multiple) { return; }
-        this.nativeElement.addEventListener('pointerdown', this.pointerdown);
         this.nativeElement.addEventListener('pointerenter', this.pointerenter);
         this.nativeElement.addEventListener('pointerup', this.pointerup);
     }
 
     private  removePointerListeners(selection) {
         if (selection !== GridSelectionMode.multiple) { return; }
-        this.nativeElement.removeEventListener('pointerdown', this.pointerdown);
         this.nativeElement.removeEventListener('pointerenter', this.pointerenter);
         this.nativeElement.removeEventListener('pointerup', this.pointerup);
     }
@@ -606,6 +604,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     ngOnInit() {
         this.zone.runOutsideAngular(() => {
+            this.nativeElement.addEventListener('pointerdown', this.pointerdown);
             this.addPointerListeners(this.cellSelectionMode);
             // IE 11 workarounds
             if (isIE()) {
@@ -629,6 +628,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     ngOnDestroy() {
         this.zone.runOutsideAngular(() => {
+            this.nativeElement.removeEventListener('pointerdown', this.pointerdown);
             this.removePointerListeners(this.cellSelectionMode);
             if (isIE()) {
                 this.nativeElement.removeEventListener('compositionstart', this.compositionStartHandler);
@@ -755,6 +755,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @internal
      */
     pointerdown = (event: PointerEvent) => {
+        if (this.cellSelectionMode !== GridSelectionMode.multiple) {
+            this.activate(event);
+            return;
+        }
         if (!isLeftClick(event)) {
             this.selectionService.addKeyboardRange();
             this.selectionService.initKeyboardState();
@@ -816,9 +820,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     @HostListener('click', ['$event'])
     public onClick(event: MouseEvent) {
-        if (this.cellSelectionMode !== GridSelectionMode.multiple) {
-            this.activate(event);
-        }
         this.grid.onCellClick.emit({
             cell: this,
             event

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

@@ -663,7 +663,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
         it('should toggle expand/collapse state of group row with ArrowRight/ArrowLeft key.', () => {
             const gRow = grid.groupsRowList.toArray()[0];
             const gRowElement = GridFunctions.getGroupedRows(fix)[0];
-            gRowElement.triggerEventHandler('click', {});
+            gRowElement.triggerEventHandler('pointerdown', {});
             fix.detectChanges();
             expect(gRow.expanded).toBe(true);
 
@@ -680,7 +680,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
         it('should toggle expand/collapse state of group row with ArrowUp/ArrowDown key.', () => {
             const gRow = grid.groupsRowList.toArray()[0];
             const gRowElement = GridFunctions.getGroupedRows(fix)[0];
-            gRowElement.triggerEventHandler('click', {});
+            gRowElement.triggerEventHandler('pointerdown', {});
             fix.detectChanges();
 
             expect(gRow.expanded).toBe(true);
@@ -704,7 +704,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             let groupedRowsCount = grid.groupsRowList.length;
             let groupRow = grid.groupsRowList.toArray()[groupedRowsCount - 1];
             const groupRowElement = GridFunctions.getGroupedRows(fix)[groupedRowsCount - 1];
-            groupRowElement.triggerEventHandler('click', null);
+            groupRowElement.triggerEventHandler('pointerdown', null);
             fix.detectChanges();
 
             GridFunctions.verifyGroupRowIsFocused(groupRow);
@@ -737,7 +737,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             expect(grid.groupsRowList.last.expanded).toBeTruthy();
 
             const groupRowIndex = grid.groupsRowList.last.index;
-            grid.groupsRowList.last.nativeElement.dispatchEvent(new Event('click'));
+            grid.groupsRowList.last.nativeElement.dispatchEvent(new Event('pointerdown'));
             await wait();
             fix.detectChanges();
             UIInteractions.triggerEventHandlerKeyDown('arrowDown', gridContent);
@@ -762,7 +762,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             fix.detectChanges();
 
             let row = grid.getRowByIndex(1);
-            row.nativeElement.dispatchEvent(new Event('click'));
+            row.nativeElement.dispatchEvent(new Event('pointerdown'));
             await wait();
             fix.detectChanges();
 
@@ -916,7 +916,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             await wait(DEBOUNCETIME);
             fix.detectChanges();
 
-            grid.navigateTo(9, -1, (args) => { args.target.nativeElement.click(); });
+            grid.navigateTo(9, -1, (args) => { args.target.nativeElement.dispatchEvent(new Event('pointerdown')); });
             await wait(100);
             fix.detectChanges();
             await wait(100);

projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts

@@ -160,7 +160,7 @@ export class IgxGridGroupByRowComponent {
     }
 
 
-    @HostListener('click')
+    @HostListener('pointerdown')
     public activate() {
         this.grid.navigation.activeNode ? this.grid.navigation.activeNode.row = this.index :
             this.grid.navigation.activeNode = {row: this.index};