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

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>