From eb7c17e3dc6b14d900f4ce9d13d93ce0c09b9806 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Wed, 17 Jan 2024 10:41:43 -0800
Subject: [PATCH] fix(tabs): `tabs.scrollToTab()` not working

Fixes #5385

The thing that scrolls is an internal element, not the host element.

PiperOrigin-RevId: 599221652
---
 tabs/internal/tabs.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/tabs/internal/tabs.ts b/tabs/internal/tabs.ts
index 290ff0fd0..bce965cbc 100644
--- a/tabs/internal/tabs.ts
+++ b/tabs/internal/tabs.ts
@@ -102,6 +102,7 @@ export class Tabs extends LitElement {
    */
   @property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;
 
+  @query('.tabs') private readonly tabsScrollerElement!: HTMLElement | null;
   @query('slot') private readonly slotElement!: HTMLSlotElement | null;
 
   private get focusedTab() {
@@ -134,7 +135,11 @@ export class Tabs extends LitElement {
     await this.updateComplete;
     const {tabs} = this;
     tabToScrollTo ??= this.activeTab;
-    if (!tabToScrollTo || !tabs.includes(tabToScrollTo)) {
+    if (
+      !tabToScrollTo ||
+      !tabs.includes(tabToScrollTo) ||
+      !this.tabsScrollerElement
+    ) {
       return;
     }
 
@@ -153,7 +158,7 @@ export class Tabs extends LitElement {
     const to = Math.min(min, Math.max(max, scroll));
     // TODO(b/299934312): improve focus smoothness
     const behavior: ScrollBehavior = !this.focusedTab ? 'smooth' : 'instant';
-    this.scrollTo({behavior, top: 0, left: to});
+    this.tabsScrollerElement.scrollTo({behavior, top: 0, left: to});
   }
 
   protected override render() {