fix(column-resize): don't allow dragging using the right mouse… (#18758)

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.

Author: crisbeto

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')

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);