[tabs] Active item in the tablist composite widget can go out of sync when a new tab is selected with a controlled update

[ciampo]

Bug report

Current behavior

When a new tab is selected while the tablist doesn't have focus (eg via a controlled update), the tablist doesn't update its internal "active" composite item to match the selected item, and instead continues to keep as the "active" item the last tab focused by the user (or the first tab).

This is particularly problematic when the activateOnFocus prop is true, since a user using the keyboard may inadvertently select a different tab just by tabbing into the tablist.

Kapture.2025-06-11.at.16.55.03.mp4

Expected behavior

When a new tab is selected while the tablist doesn't have focus (eg via a controlled update), the tablist should update its internal "active" composite item to match the selected item.

This will allow the user to tab back into the tablist and have the keyboard focus on the selected tab.

This behaviour should be implemented regardless of the activateOnFocus prop.

Reproducible example

https://codesandbox.io/p/sandbox/gallant-grass-h5fvk6:

• Select a tab other than "account"
• Click on the "Select "Account"" button
• Using the keyboard, tab into the tablist
• Notice how the tab receiving focus is not the selected tab (account), but the tab that was last focused
• This is particularly problematic when activateOnFocus is true, since the tab receiving focus will become selected

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

N/A

[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@2107