search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

[DOCS]: Help migrating to v2 #3205

Closed elie222 closed 4 months ago

elie222 commented 4 months ago

Posting this here to help others that search for the issue. You may see an error when moving to headlessui/react v2 as such as:

Error: Did you forget to passthrough the `ref` to the actual DOM node?

The fix for me was replacing as={<Fragment />} with as='div' as well as adding in some as='div' in places that didn't have it.

More changes that can help when moving to v2 available here: https://github.com/elie222/inbox-zero/commit/c763b42d70a03b6f35a9689d7309ef7486f40705

leonatajeff commented 4 months ago

Adding on:

This was also outlined in the v2 release

Change default tags for ListboxOptions, ListboxOption, ComboboxOptions, ComboboxOption, and TabGroup components (#3109)

It could use more visibility in the docs though, it is a little buried

razzeee commented 4 months ago

Our whole test suite starts failing with v2, I'm guessing, that stuff like roles only get backfilled after some time and our tests don't wait for that right now?

adamwathan commented 4 months ago

Hey! I've moved this change to the top of the upgrade guide to make it a little easier to notice 👍

Basically a bunch of things that used to render div elements now render a Fragment, so if you were expecting the <Transition> for example to render a div, you'll need to add as="div" to get things working as expected again.