Controlled mode for Tabs component in React does not work

[CiotkaCierpienia]

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! 🙏

Please make sure that you save all the files in your CodeSandbox before sharing. It's currently empty:

That said, here is a CodeSandbox that demonstrates that you can change the tab (use the previous & next buttons): https://codesandbox.io/s/patient-breeze-86frfd?file=/src/App.js

[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 ❓

[farmerpaul]

I'm having the same issue. The selectedIndex prop isn't very useful if clicking the <Tab> buttons still changes the active tab to something else, despite what selectedIndex is set to. The only reason I'd to use selectedIndex is so that I can have complete control over what tab is shown and when. In my case, it's to cause a transition effect to run (using Headless UI Transitions) before the tab is unmounted, and I can't figure out another way to do this except by having total control over when that tab is unmounted.

[farmerpaul]

For those wanting a not-very-pretty workaround (effective with clicking the tabs, though not keyboard nav events), here's what I figured out:

1. Add pointer-events-none class to each <Tab>.
2. Add another <div> inside each <Tab>, and on that <div> give it the pointer-events-auto class and its own onClick prop.
3. Inside onClick, make sure to event.stopPropagation() so that the <Tab>'s click logic doesn't get run.
4. Then add whatever logic you need to that onClick handler to determine whether or not you want to run setSelectedIndex(index) (where index is coming from your map() callback arg, presuming your tabs are arriving as an array).

If anyone else has a nicer solution than this, please share. 🙂

[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.

[Nautman]

This feature is working great in the insiders version!

Is there any PR or issue that I can subscribe to in order to stay updated when this has been released in a new update? :)