Controlled mode for Tabs component in React does not work

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.3

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/cool-https-tsn49q

Describe your issue

Controlled mode for Tabs component in React does not work, no matter if the state is inside of the component or outside, even if I would put selectedIndex={0} I still can change the tab.

[RobinMalfait]

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

@ptmdmusique your reproduction helped. This should be fixed by #1680, and will be available in the next release.

I also updated the CodeSandbox with the latest insiders version to see the fix in action: https://codesandbox.io/s/headless-ui-tabs-forked-h8h0lp?file=/src/App.js

You can already try it using:

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

[ptmdmusique]

Hey @RobinMalfait 👋 Thanks a bunch for such a helpful library 🎉

I think the problem OP posted was that we can still change the tab via Tab click even if it’s a controlled component and the internal state that’s used to manage the tabs index will be different from the controlled tab

Here is the repro sandbox: https://codesandbox.io/s/headless-ui-tabs-hf0lqr?file=/src/App.js

One use case I think this would help solve is when we need to validate something before moving to another tab (e.g: show a notice if there are unsaved changes on the current tab)

But maybe I miss something in the doc. Could you help me take a look ❓