Tabs: selectedIndex is not selecting the correct tab

[fjolliton]

What package within Headless UI are you using?

I'm using @headlessui/react, and I use the code provided at the top of the Tabs documentation page as a starting point. I just added a button to toggle the middle tab presence, and I'm hardcoding the selectedIndex to 1 (but no onChange is provided however).

This was tested with a Vite project (and the same behavior occurs in a Webpack bigger project).

What version of that package are you using?

For example: v1.7.18

What browser are you using?

Tested with Firefox and Chrome.

Reproduction URL

See https://github.com/fjolliton/headlessui-tabs-index-issue.

Describe your issue

As you can see with the given project, initially the "Popular" tab is highlighted as intended.

By clicking "Toggle Popular" button, this tab will disappear, and "Trending" become the active one. This is fine because it became the tab with index 1.

Now, if we click again on the "Toggle Popular" button, this starts to be wrong, because the "Popular" tab is listed again, but the active one is still the "Trending" tab! This is not respecting the selectedIndex property.

Clicking one more time on the "Toggle Popular" button, the "Popular" entry get removed as expected, but no tab at all is active. The "Trending" tab should have been the active one here.

More surprisingly, in our project, the behavior disappear with a production build. We only observe this in a development build. (With the minimal Vite project provided in this issue, it occurs in both case however.)

(edit: spelling)

[RobinMalfait]

Hey!

When a tab is already active and new tabs are inserted or existing tabs are removed then we try to maintain the already selected tab active. This is currently why you see the behaviour your see.

However, this is good behaviour if tabs are uncontrolled, but I get that if you want to control your tabs that you want to control your tabs and not us. So that's definitely a bug we need to fix and that I'm working on right now.

I know it's been a while since you opened this bug report, but a workaround for you right now would be to use key={index} instead of key={category}. This will re-render the current tab because the contents at a given index changes, instead of the tab moving around because the key is stable.

[RobinMalfait]

Hey!

Small update, this should be fixed by #3037, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[fjolliton]

Using key={index} was already our workaround.

Good to know it's fixed. We will test that soon. Thank you for the fix.