[tabs] disabled tabs should not be automatically picked as the initially selected tab

[ciampo]

Bug report

Current behavior

When tabs and tabpanels are not given a value, and Tabs.Root is not provided with a value or defaultValue, the component automatically picks the first tab as the selected tab (hence why defaultValue has a default value of 0).

If a tab is disabled, it still gets automatically selected.

Expected behavior

• When no explicit selection is made by the consumer of the component (ie. via value or defaultValue props), disabled tabs should not be picked as the initially selected tab. The first non-disabled tab should be picked instead
• A disabled tab should still be selected if:
  • The consumer explicitly sets it as selected (via defaultValue or value props)
  • The tab was selected while enabled, and later disabled

Reproducible example

https://codesandbox.io/p/sandbox/elated-microservice-wl4sl2

Notice how alert doesn't fire initially, while it fires for every subsequent user interaction.

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

I understand this may be an opinionated take — in any case, whatever is decided, it shoud be applied to all components whenever a value changes for reasons outside of the consumer's control (and not just tabs).

[github-actions[bot]]

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/react@3475