From b29308ab5174d36df60554b55d2b9a774d234767 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 9 Mar 2020 22:54:31 +0100
Subject: [PATCH] =?UTF-8?q?fix(column-resize):=20don't=20allow=20dragging?=
 =?UTF-8?q?=20using=20the=20right=20mouse=E2=80=A6=20(#18758)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The column resize component allows any `mousedown` to start the drag sequence, including using the right button which can look weird since the context menu will be triggered as soon as they let go. These changes limit the dragging only to the left button, similarly to what we're doing in other places.
---
 .../column-resize/overlay-handle.ts           |  5 +++++
 .../column-resize/column-resize.spec.ts       | 20 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/cdk-experimental/column-resize/overlay-handle.ts b/src/cdk-experimental/column-resize/overlay-handle.ts
index 1441edf7cf5b..77d3b8fa8c46 100644
--- a/src/cdk-experimental/column-resize/overlay-handle.ts
+++ b/src/cdk-experimental/column-resize/overlay-handle.ts
@@ -80,6 +80,11 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
   }
 
   private _dragStarted(mousedownEvent: MouseEvent) {
+    // Only allow dragging using the left mouse button.
+    if (mousedownEvent.button !== 0) {
+      return;
+    }
+
     const mouseup = fromEvent<MouseEvent>(this.document, 'mouseup');
     const mousemove = fromEvent<MouseEvent>(this.document, 'mousemove');
     const escape = fromEvent<KeyboardEvent>(this.document, 'keyup')
diff --git a/src/material-experimental/column-resize/column-resize.spec.ts b/src/material-experimental/column-resize/column-resize.spec.ts
index 633cc33582c9..bdd8badc3fc7 100644
--- a/src/material-experimental/column-resize/column-resize.spec.ts
+++ b/src/material-experimental/column-resize/column-resize.spec.ts
@@ -173,13 +173,14 @@ abstract class BaseTestComponent {
     return parseInt((thumbElement.parentNode as HTMLElement).style.left!, 10);
   }
 
-  beginColumnResizeWithMouse(index: number): void {
+  beginColumnResizeWithMouse(index: number, button = 0): void {
     const thumbElement = this.getOverlayThumbElement(index);
     this.table.nativeElement!.dispatchEvent(new MouseEvent('mouseleave',
-        {bubbles: true, relatedTarget: thumbElement}));
+        {bubbles: true, relatedTarget: thumbElement, button}));
     thumbElement.dispatchEvent(new MouseEvent('mousedown', {
       bubbles: true,
       screenX: MOUSE_START_OFFSET,
+      button
     } as MouseEventInit));
   }
 
@@ -391,6 +392,21 @@ describe('Material Popover Edit', () => {
         fixture.detectChanges();
       }));
 
+      it('should not start dragging using the right mouse button', fakeAsync(() => {
+        const initialColumnWidth = component.getColumnWidth(1);
+
+        component.triggerHoverState();
+        fixture.detectChanges();
+        component.beginColumnResizeWithMouse(1, 2);
+
+        const initialPosition = component.getOverlayThumbPosition(1);
+
+        component.updateResizeWithMouseInProgress(5);
+
+        (expect(component.getOverlayThumbPosition(1)) as any).toBe(initialPosition);
+        (expect(component.getColumnWidth(1)) as any).toBe(initialColumnWidth);
+      }));
+
       it('cancels an active mouse resize with the escape key', fakeAsync(() => {
         const initialColumnWidth = component.getColumnWidth(1);