fix(tabs): don't start auto-scroll when right clicking on buttons (#18033)

Currently we use `mousedown` to figure out when to start auto-scrolling the tab header, but the event is also dispatched for right clicks. This can be weird, because accidental right clicks that open the system dropdown can start scrolling without being able to stop it easily. These changes make it so we only start for left button clicks.

Author: crisbeto

src/material-experimental/mdc-tabs/tab-header.html

@@ -6,7 +6,7 @@
      [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-mdc-tab-header-pagination-disabled]="_disableScrollBefore"
      (click)="_handlePaginatorClick('before')"
-     (mousedown)="_handlePaginatorPress('before')"
+     (mousedown)="_handlePaginatorPress('before', $event)"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
 </div>
@@ -31,7 +31,7 @@
      mat-ripple
      [matRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-mdc-tab-header-pagination-disabled]="_disableScrollAfter"
-     (mousedown)="_handlePaginatorPress('after')"
+     (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>

src/material-experimental/mdc-tabs/tab-header.spec.ts

@@ -7,6 +7,7 @@ import {
   dispatchKeyboardEvent,
   createKeyboardEvent,
   dispatchEvent,
+  createMouseEvent,
 } from '@angular/cdk/testing/private';
 import {CommonModule} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
@@ -458,6 +459,16 @@ describe('MDC-based MatTabHeader', () => {
         expect(header.scrollDistance).toBe(previousDistance);
       }));
 
+      it('should not scroll when pressing the right mouse button', fakeAsync(() => {
+        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+
+        dispatchEvent(nextButton, createMouseEvent('mousedown', undefined, undefined, 2));
+        fixture.detectChanges();
+        tick(3000);
+
+        expect(header.scrollDistance).toBe(0, 'Expected not to have scrolled after a while.');
+      }));
+
       /**
        * Asserts that auto scrolling using the next button works.
        * @param startEventName Name of the event that is supposed to start the scrolling.

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.html

@@ -5,7 +5,7 @@
      mat-ripple [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-mdc-tab-header-pagination-disabled]="_disableScrollBefore"
      (click)="_handlePaginatorClick('before')"
-     (mousedown)="_handlePaginatorPress('before')"
+     (mousedown)="_handlePaginatorPress('before', $event)"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
 </div>
@@ -24,7 +24,7 @@
      aria-hidden="true"
      mat-ripple [matRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-mdc-tab-header-pagination-disabled]="_disableScrollAfter"
-     (mousedown)="_handlePaginatorPress('after')"
+     (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>

src/material/tabs/paginated-tab-header.ts

@@ -549,7 +549,13 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
    * Starts scrolling the header after a certain amount of time.
    * @param direction In which direction the paginator should be scrolled.
    */
-  _handlePaginatorPress(direction: ScrollDirection) {
+  _handlePaginatorPress(direction: ScrollDirection, mouseEvent?: MouseEvent) {
+    // Don't start auto scrolling for right mouse button clicks. Note that we shouldn't have to
+    // null check the `button`, but we do it so we don't break tests that use fake events.
+    if (mouseEvent && mouseEvent.button != null && mouseEvent.button !== 0) {
+      return;
+    }
+
     // Avoid overlapping timers.
     this._stopInterval();
 

src/material/tabs/tab-header.html

@@ -4,7 +4,7 @@
      mat-ripple [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollBefore"
      (click)="_handlePaginatorClick('before')"
-     (mousedown)="_handlePaginatorPress('before')"
+     (mousedown)="_handlePaginatorPress('before', $event)"
      (touchend)="_stopInterval()">
   <div class="mat-tab-header-pagination-chevron"></div>
 </div>
@@ -28,7 +28,7 @@
      aria-hidden="true"
      mat-ripple [matRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollAfter"
-     (mousedown)="_handlePaginatorPress('after')"
+     (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-tab-header-pagination-chevron"></div>

src/material/tabs/tab-header.spec.ts

@@ -7,6 +7,7 @@ import {
   dispatchKeyboardEvent,
   createKeyboardEvent,
   dispatchEvent,
+  createMouseEvent,
 } from '@angular/cdk/testing/private';
 import {CommonModule} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
@@ -458,6 +459,16 @@ describe('MatTabHeader', () => {
         expect(header.scrollDistance).toBe(previousDistance);
       }));
 
+      it('should not scroll when pressing the right mouse button', fakeAsync(() => {
+        expect(header.scrollDistance).toBe(0, 'Expected to start off not scrolled.');
+
+        dispatchEvent(nextButton, createMouseEvent('mousedown', undefined, undefined, 2));
+        fixture.detectChanges();
+        tick(3000);
+
+        expect(header.scrollDistance).toBe(0, 'Expected not to have scrolled after a while.');
+      }));
+
       /**
        * Asserts that auto scrolling using the next button works.
        * @param startEventName Name of the event that is supposed to start the scrolling.

src/material/tabs/tab-nav-bar/tab-nav-bar.html

@@ -4,7 +4,7 @@
      mat-ripple [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollBefore"
      (click)="_handlePaginatorClick('before')"
-     (mousedown)="_handlePaginatorPress('before')"
+     (mousedown)="_handlePaginatorPress('before', $event)"
      (touchend)="_stopInterval()">
   <div class="mat-tab-header-pagination-chevron"></div>
 </div>
@@ -23,7 +23,7 @@
      aria-hidden="true"
      mat-ripple [matRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollAfter"
-     (mousedown)="_handlePaginatorPress('after')"
+     (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-tab-header-pagination-chevron"></div>