How to use Float when Menu.Button is a Fragment?

[jarcoal]

Use Version Use version when question appear:

• Headless UI: v1.6.6
• Headless UI Float: v0.7.0
• Framework: react v17

Describe the question

I'm trying to make a reusable wrapper around the Headless UI's Menu.Button component, but for some reason when I use it, Float doesn't seem able to position the Menu.Items correctly and it just goes to the top left of the screen instead of next to the button itself.

Here's what I'm using:

import { Menu as HeadlessMenu } from '@headlessui/react'

// ....

const Opener: React.FC<OpenerProps> = React.forwardRef<
  HTMLDivElement,
  OpenerProps
>(({ children }, ref) => (
  <HeadlessMenu.Button as={React.Fragment}>
    <children.type {...children.props} ref={ref} />
  </HeadlessMenu.Button>
))

If I change:

<HeadlessMenu.Button as={React.Fragment}>

to:

<HeadlessMenu.Button as="div">

it works, but for my use-case I really want to use a Fragment there instead.

Any thoughts on what I could do to use a Fragment but still get the correct positioning? I thought by passing the ref down into the children that would do it, but apparently not.

In case it helps, here's what I have for my Float component (again this is inside a custom reusable component):

const Wrapper: React.FC<WrapperProps> = ({ children, placement }) => (
  <HeadlessMenu>
    <Float
      offset={10}
      placement={placement}
      portal
      enter="tw-transition tw-ease-out tw-duration-100"
      enterFrom="tw-transform tw-opacity-0 tw-scale-95"
      enterTo="tw-transform tw-opacity-100 tw-scale-100"
      leave="tw-transition tw-ease-in tw-duration-75"
      leaveFrom="tw-transform tw-opacity-100 tw-scale-100"
      leaveTo="tw-transform tw-opacity-0 tw-scale-95"
    >
      {children}
    </Float>
  </HeadlessMenu>
)