Tabs in Primary Features section of the Pocket template

[iamchubko]

Describe the bug
In Pocket template, Primary Features block in downloaded repo behave differently compared to https://pocket.tailwindui.com/.

If you select anything but the first tab, it will render span as if only one Tab.Panel was present and was not selected. But in the live version AnimatePresence animates enter and exit as expected and at the end of the transition the only div is always the one we selected, despite being the only one.

To Reproduce
Steps to reproduce the behavior:

1. Download the latest zip archive with the repo
2. Start the dev server
3. Change tabs in Primary Features section

Expected behavior
Downloaded repo should behave exactly like on the website

Screencasts

correct_behaviour.mp4

wrong_behaviour.mp4

Browser/Device (if applicable)

• OS: Linux Mint 20.3
• Browser: Brave
• Version: 1.43.93 (chromium 105)

[thecrypticace]

Hey this is a regression from a bug fix we did in Headless UI v1.7.1 — @RobinMalfait and I took a look and have come up with a fix which has just been tagged: https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v1.7.2

You can run an npm upgrade to fix this problem. Thanks for reporting it!

The reason prod was working was because it hadn't been updated to v1.7.1 of Headless UI yet.

[iamchubko]

Can confirm, it is working