Respect selectedIndex for controlled <Tab/> components

[RobinMalfait]

This PR fixes an issue where the selectedIndex doesn't always match the visibly selected tab, when using a controlled <Tab /> component.

The <Tab /> component can be used in 2 ways:

• Uncontrolled: where the selectedIndex is managed internally by the component itself.
• Controlled: where the selectedIndex is managed by the parent component (or in other words, you).

When the <Tab /> component is uncontrolled, and thus the state is managed internally, then we try to make sure that we maintain the active tab. For example, if you have the following tabs:

+---------+---------+---------+
| Tab foo | Tab bar | Tab baz |
|         | ------- |         |
+---------+---------+---------+

Right now Tab bar is the active one, if you now add or remove a tab before Tab bar then we still want Tab bar to be the active one.

When Tab foo is deleted:

+---------+---------+
| Tab bar | Tab baz |
| ------- |         |
+---------+---------+

When Tab qux is added:

+---------+----------+---------+---------+
| Tab foo |  Tab qux | Tab bar | Tab baz |
|         |          | ------- |         |
+---------+----------+---------+---------+

This behaviour makes sense, because otherwise you are constantly changing the active tab, which is typically not what you want.

The problem is that we also did this when the component was controlled, but then the selectedIndex value is not in sync with what's actually visible. This means that the behaviour looks like this:

+---------+---------+---------+
| Tab foo | Tab bar | Tab baz |
|         | ------- |         |
+---------+---------+---------+

- Selected index: 1
- Visually selected: 1

When Tab foo is deleted:

+---------+---------+
| Tab bar | Tab baz |
| ------- |         |
+---------+---------+

- Selected index: 1
- Visually selected: 0

When Tab qux is added:

+---------+----------+---------+---------+
| Tab foo |  Tab qux | Tab bar | Tab baz |
|         |          | ------- |         |
+---------+----------+---------+---------+

- Selected index: 1
- Visually selected: 2

Instead, we will now always use the selectedIndex value to determine the active tab, and not try to maintain the active tab when the component is controlled.

+---------+---------+---------+
| Tab foo | Tab bar | Tab baz |
|         | ------- |         |
+---------+---------+---------+

- Selected index: 1
- Visually selected: 1

When Tab foo is deleted:

+---------+---------+
| Tab bar | Tab baz |
|         | ------- |
+---------+---------+

- Selected index: 1
- Visually selected: 1

When Tab qux is added:

+---------+----------+---------+---------+
| Tab foo |  Tab qux | Tab bar | Tab baz |
|         |  ------- |         |         |
+---------+----------+---------+---------+

- Selected index: 1
- Visually selected: 1

Since it is a controlled component, it is up to you to keep the selectedIndex in sync with what you want if you add or remove tabs.

Fixes: #2989

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 15, 2024 1:34pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 15, 2024 1:34pm