fix(igx-grid): Emit range selection event

Selection style is no longer applied on non-primary "clicks" Closes #4878
IgniteUI · May 27, 2019 · 5cfaec4 · 5cfaec4
1 parent f301b6a
commit 5cfaec4
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 7 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/grid-selection.ts b/projects/igniteui-angular/src/lib/core/grid-selection.ts
@@ -23,6 +23,7 @@ interface ISelectionKeyboardState {
 
 interface ISelectionPointerState extends ISelectionKeyboardState {
     ctrl: boolean;
+    primaryButton: boolean;
 }
 
 type SelectionState = ISelectionKeyboardState | ISelectionPointerState;
@@ -219,6 +220,14 @@ export class IgxGridSelectionService {
         return ranges;
     }
 
+    get primaryButton(): boolean {
+        return this.pointerState.primaryButton;
+    }
+
+    set primaryButton(value: boolean) {
+        this.pointerState.primaryButton = value;
+    }
+
     constructor(private zone: NgZone) {
         this.initPointerState();
         this.initKeyboardState();
@@ -242,6 +251,7 @@ export class IgxGridSelectionService {
         this.pointerState.ctrl = false;
         this.pointerState.shift = false;
         this.pointerState.range = null;
+        this.pointerState.primaryButton = true;
     }
 
     /**
@@ -401,8 +411,9 @@ export class IgxGridSelectionService {
         }
     }
 
-    pointerEnter(node: ISelectionNode, dragEnabled: boolean): boolean {
-        this.dragMode = dragEnabled;
+    pointerEnter(node: ISelectionNode, event: PointerEvent): boolean {
+        // https://www.w3.org/TR/pointerevents/#the-button-property
+        this.dragMode = event.buttons === 1 && event.button === -1;
         if (!this.dragMode) {
             return false;
         }

diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts
@@ -230,7 +230,7 @@ export function isFirefox(): boolean {
  * @hidden
  */
 export function isLeftClick(event: PointerEvent) {
-    return event.buttons === 1;
+    return event.button === 0;
 }
 
 /** @hidden */

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -635,7 +635,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @internal
      */
     pointerdown = (event: PointerEvent) => {
-        if (!isLeftClick(event)) { return; }
+        if (!isLeftClick(event)) {
+            this.selectionService.primaryButton = false;
+            return;
+        }
         this.selectionService.pointerDown(this.selectionNode,
             event.shiftKey, event.ctrlKey);
     }
@@ -646,7 +649,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @internal
      */
     pointerenter = (event: PointerEvent) => {
-        const dragMode = this.selectionService.pointerEnter(this.selectionNode, isLeftClick(event));
+        const dragMode = this.selectionService.pointerEnter(this.selectionNode, event);
         if (dragMode) {
             this.grid.cdr.detectChanges();
         }
@@ -715,7 +718,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         if (!this.selectionService.isActiveNode(this.selectionNode)) {
             this.grid.onSelection.emit({ cell: this, event });
         }
-        this.selectionService.activeElement = this.selectionNode;
+        if (this.selectionService.primaryButton) {
+            this.selectionService.activeElement = this.selectionNode;
+        }
+        this.selectionService.primaryButton = true;
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-multi-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-multi-cell-selection.spec.ts
@@ -88,17 +88,31 @@ describe('IgxGrid - Multi Cell selection', () => {
         });
 
         it('Should not lose selection on right clicking', () => {
+            const selectionChangeSpy = spyOn<any>(grid.onRangeSelection, 'emit').and.callThrough();
             const range = { rowStart: 2, rowEnd: 3, columnStart: 0, columnEnd: 1 };
             grid.setSelection(range);
             detect();
 
             HelperUtils.verifySelectedRange(grid, 2, 3, 0, 1, 0, 1);
 
+            // Simulate right-click
             const endCell = grid.getCellByColumn(4, 'ID');
-            endCell.nativeElement.dispatchEvent(new PointerEvent('pointerdown', { buttons: 2 }));
+            endCell.nativeElement.dispatchEvent(new PointerEvent('pointerdown', { button: 2 }));
+            endCell.nativeElement.dispatchEvent(new Event('focus'));
+            endCell.nativeElement.dispatchEvent(new PointerEvent('pointerup', { button: 2 }));
             detect();
 
             HelperUtils.verifySelectedRange(grid, 2, 3, 0, 1, 0, 1);
+            expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
+
+            const c = grid.getCellByColumn(0, 'ID');
+            c.nativeElement.dispatchEvent(new PointerEvent('pointerdown'));
+            c.nativeElement.dispatchEvent(new Event('focus'));
+            c.nativeElement.dispatchEvent(new PointerEvent('pointerup'));
+            detect();
+
+            expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
+            HelperUtils.verifySelectedRange(grid, 0, 0, 0, 0, 0, 1);
         });
 
         it('Should be able to select multiple ranges with Ctrl key and mouse drag', () => {

diff --git a/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts
@@ -101,6 +101,7 @@ export class UIInteractions {
             cancelable: true,
             pointerId: 1,
             buttons: 1,
+            button: eventName === 'pointerenter' ? -1 : 0,
             shiftKey: shift,
             ctrlKey: ctrl
         };