How would I pass :as Frament?

[4x4notfound]

     [ui/transition-child
      {:as Fragment
       :enter "transition-opacity ease-linear duration-300",
       :enter-from "opacity-0",
       :enter-to "opacity-100",
       :leave "transition-opacity ease-linear duration-300",
       :leave-from "opacity-100",
       :leave-to "opacity-0"}

Uncaught TypeError: Cannot read properties of undefined (reading 'add')

[mainej]

I wish I knew! 😅 Currently headlessui-reagent doesn't support Fragments. This question/complaint about headlessui-reagent is common enough that it's documented in the README. It's annoying, right? Especially since many of the examples on https://headlessui.dev use Fragments, especially in transitions.

The problem is essentially that if you ask Headless UI to use a Fragment, it needs to inject all those classes onto its child. But there are so many Reagent wrappers on the children that Headless UI can't get down to a React function or component that it knows how to manipulate. There are lots of tools in Reagent to remove or replace those wrappers, but I've never found a combination that works.

The best workaround I've found is to allow the transitions to render as divs, their default. Sometimes that requires moving CSS from the interior elements to the transition element. Here's an example where I needed to do that to make a Dialog work. The CSS in the ClojureScript there differs slightly from the original react version which uses fragments, but the final appearance on screen is identical.

If you have particular code you can't get to render correctly, I can try to help you restructure the CSS so that it's styled correctly despite not using a Fragment. If you really have to use a Fragment, I'm not sure I can help. And... if you find a way around the problem, bug fixes are welcome!

[4x4notfound]

This is very helpful.

I'll see what I can do with the example 🧐