[tabs] Support scrolling TabsList

[ciampo]

Bug report

Current behavior

When the Tabs.List component is set to overflow: scroll in order to show all children Tabs.Tab, the Tabs component stops functioning as expected:

• if the selected tab is hidden, the user won't have a visual clue that it is selected
• the --active-tab-* CSS variables used to position the Tabs.Indicator have incorrect values that cause the indicator to go out of sync

Kapture.2025-06-09.at.16.55.24.mp4

Expected behavior

• Whenever a new tab is selected, the tablist should scroll it into view
• The --active-tab-* CSS variables should be correct even when the tablist is scrollable

For reference, this is a screen recording of the current implementation that we have in the @wordpress/components package:

Kapture.2025-06-10.at.13.31.52.mp4

Reproducible example

https://codesandbox.io/p/sandbox/xenodochial-cray-68ycy4

Base UI version

1.0.0-beta.0

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Which assistive tech are you using (if applicable)?

N/A

Additional context

Currently, in Gutenberg, our Tabs component is build on top of Ariakit.

While Ariakit doesn't provide support for this feature out of the box (not even the CSS variables), its APIs allow us to grab a reference to the selected tab's DOM element, which we feed to some custom code enable support for scrolling tablist:

• Code: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tabs/tablist.tsx
• Example: https://wordpress.github.io/gutenberg/?path=/story/components-tabs--size-and-overflow-playground

While we could probably manage to implement something similar with BaseUI, the absence of APIs to easily get Tabs internal state and the selected Tab's DOM element makes it more convolute.

Also, since Base UI exposes the --active-tab-* CSS variables, it feels like this scenario should be also handled internally by Base UI.

[mj12albert]

diff --git a/packages/react/src/tabs/indicator/TabsIndicator.tsx b/packages/react/src/tabs/indicator/TabsIndicator.tsx
index 457e120d18..df49265829 100644
--- a/packages/react/src/tabs/indicator/TabsIndicator.tsx
+++ b/packages/react/src/tabs/indicator/TabsIndicator.tsx
@@ -92,9 +92,9 @@ export const TabsIndicator = React.forwardRef(function TabIndicator(
         bottom: listBottom,
       } = tabsListRef.current.getBoundingClientRect();
 
-      left = round(tabLeft - listLeft);
+      left = selectedTabElement.offsetLeft - tabsListRef.current.clientLeft;
       right = round(listRight - tabRight);
-      top = round(tabTop - listTop);
+      top = selectedTabElement.offsetTop - tabsListRef.current.clientTop;
       bottom = round(listBottom - tabBottom);
       width = round(tabRight - tabLeft);
       height = round(tabBottom - tabTop);

This seems to be the minimum required to fix the indicator's positioning; but if the initially selected Tab has overflowed, maybe TabsList should auto-scroll to it?

[ciampo]

but if the initially selected Tab has overflowed, maybe TabsList should auto-scroll to it?

I think so — the way I'd frame the requirement, is that any time the selected tab changes (including initial selection), the tablist should scroll the selected tab into view.

Would that be reasonable?

[mj12albert]

Yep, I've opened a PR which fixes this: https://codesandbox.io/p/sandbox/dreamy-leftpad-hxv4w8

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@2093