From 274ce3e4e06867acfab642123192e0a7aa9b45d4 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 27 Feb 2024 16:43:42 -0800
Subject: [PATCH] fix(tabs): default `scroll-behavior: smooth` not working

Fixes #5497

PiperOrigin-RevId: 610915724
---
 tabs/internal/_tabs.scss | 2 ++
 tabs/internal/tabs.ts    | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/tabs/internal/_tabs.scss b/tabs/internal/_tabs.scss
index e2a746d26..598522890 100644
--- a/tabs/internal/_tabs.scss
+++ b/tabs/internal/_tabs.scss
@@ -29,6 +29,8 @@
     display: flex;
     height: 100%;
     overflow: inherit;
+    scroll-behavior: inherit;
+    scrollbar-width: inherit;
     justify-content: space-between;
     width: 100%;
   }
diff --git a/tabs/internal/tabs.ts b/tabs/internal/tabs.ts
index 8ae355856..c33a602d9 100644
--- a/tabs/internal/tabs.ts
+++ b/tabs/internal/tabs.ts
@@ -157,8 +157,11 @@ export class Tabs extends LitElement {
     const min = offset - scrollMargin;
     const max = offset + extent - hostExtent + scrollMargin;
     const to = Math.min(min, Math.max(max, scroll));
-    // TODO(b/299934312): improve focus smoothness
-    const behavior: ScrollBehavior = !this.focusedTab ? 'smooth' : 'instant';
+    // When a tab is focused, use 'auto' to use the CSS `scroll-behavior`. The
+    // default behavior is smooth scrolling. However, when there is not a tab
+    // focused on initialization, use 'instant' to immediately bring the focused
+    // tab into view.
+    const behavior: ScrollBehavior = !this.focusedTab ? 'instant' : 'auto';
     this.tabsScrollerElement.scrollTo({behavior, top: 0, left: to});
   }