Tab.Group's selectedIndex is buggy.

[RyogaK]

What package within Headless UI are you using?

@headlessui/react
@headlessui/vue

What version of that package are you using?

v1.4.3

What browser are you using?

Chrome

Reproduction URL

RyogaK/headlessui@main...RyogaK:tab-selectedindex-bug-reproduce

Describe your issue

When switching tabs using the selectedIndex prop in Tab.Group, it behaves as if the selected index in the appearance is not the same as the selected index in the internal state.

(e.g.) If the initial state of selectedIndex is set to 0 and later changed to 1, the tab 1 looks correctly displayed, but the behavior when clicking on the tabs remain the same as when 0 is selected. When I click on tab 0, it doesn't switch, probably because internally it has already determined that it is 0. When I click on tab 1, it looks like it is already tab 1, but onChange is called again to transition to tab 1.

There is a fork with test code that reproduces this.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Thank you for providing the tests as well! This should be fixed by #1050, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

[brvnonascimento]

I'm still experiencing this and the @insiders version gives me import errors

Package path . is not exported from package /Users/user/code/project/node_modules/@headlessui/react

[RobinMalfait]

@brvnonascimento can you create a minimal reproduction repo and share that? Also make sure to remove any caches like the .next folder for example if you are using Next.js

[brvnonascimento]

The problem (under @headlessui/react@0.0.0-insiders.6fc28c6) was that I was using Linaria to style the Tab component as in:

Tabs.Tab = styled(Tab)`
  background: red;
`;

Probably very specific to Linaria. However, I'm still experiencing the bug when onChange prop is present. Doesn't even have to have a controlled selectedIndex.

[brvnonascimento]

The bug was caused by having the Tab.Panel being wrapped by a React Spring's animated.div component.