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)