Error when using menu and listbox with child function and fragment in React 19

[isoroka-plana]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: v2.2.0

What browser are you using?

For example: Chrome

Reproduction URL

https://codesandbox.io/p/devbox/funny-wood-jtchxm

Describe your issue

After updating to React 19 following error has begun to appear in my console:

 Invalid prop `data-headlessui-state` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props. 

When direct child of Menu or Listbox elements is a react fragment (my use case is that I am using a function a function for children to access the component's APIs). Example:

<Menu>
  ({open}) => (
    <>
      <MenuButton>Text</MenuButton>
      {open && <MenuItems></MenuItems}
    </>
  )
</Menu>

There may be other components affected, I did not test.

[Shawns2759]

I am having the same issues.

[s-lukashenka-micoworks]

Same here.

[DoctorDerek]

I fixed this by replacing all the <> (Fragment) </> examples with <div> and </div> in my use of Headless UI Listbox:

<Menu>
  ({open}) => (
    <div>  {/* was <> */}
      <MenuButton>Text</MenuButton>
      {open && <MenuItems></MenuItems}
    </div> {/* was </> */}
  )
</Menu>

[vincerubinetti]

Using as="div" on the top-level component (e.g. Menu, Listbox, etc.) also seems to achieve the same effect.

But this definitely seems like an oversight/bug. The components need to have multiple children, e.g. ListboxButton and ListboxOptions, and need to be able to support render props, and the only way to do that is with a Fragment.

[RobinMalfait]

This should be fixed by #3788, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.