fix(material/tabs): avoid interrupting click event when scrolling the…

… header (#21911)

When a header is scrollable, we scroll a tab into view whenever it receives focus. The
problem is that if focus is moved as a result of a mouse/touch event, the tab can be
moved out from under the pointer, interrupting the click.

These changes work around the issue by not scrolling the header on mouse/touch focus.

Fixes #21898.

(cherry picked from commit 4279ff1)

src/material/tabs/tab-group.ts

@@ -407,7 +407,11 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
 
   /** Callback for when the focused state of a tab has changed. */
   _tabFocusChanged(focusOrigin: FocusOrigin, index: number) {
-    if (focusOrigin) {
+    // Mouse/touch focus happens during the `mousedown`/`touchstart` phase which
+    // can cause the tab to be moved out from under the pointer, interrupting the
+    // click sequence (see #21898). We don't need to scroll the tab into view for
+    // such cases anyway, because it will be done when the tab becomes selected.
+    if (focusOrigin && focusOrigin !== 'mouse' && focusOrigin !== 'touch') {
       this._tabHeader.focusIndex = index;
     }
   }