fix(tabs): default scroll-behavior: smooth not working

Fixes #5497 PiperOrigin-RevId: 610802319
material-components · Feb 27, 2024 · 5cc8de2 · 5cc8de2
1 parent c6ffd70
commit 5cc8de2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/tabs/internal/_tabs.scss b/tabs/internal/_tabs.scss
@@ -29,6 +29,9 @@
     display: flex;
     height: 100%;
     overflow: inherit;
+    scroll-behavior: inherit;
+    scrollbar-gutter: inherit;
+    scrollbar-width: inherit;
     justify-content: space-between;
     width: 100%;
   }

diff --git 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});
   }