Passing props to React.Fragments

[TheRealFlyingCoder]

Use Version @headlessui-float/react: "^0.11.0",

Describe the bug When using the following popover setup, the package is rendering React.Fragment elements, and attempting to pass styles to them leading to console warnings:

Warning: Invalid propstylesupplied toReact.Fragment. React.Fragment can only havekeyandchildrenprops.

<Popover>
  {({ open }) => (
    <Float
     placement="bottom-end"
     offset={15}
     arrow={5}
     transform={false}
     floatingAs={Fragment}
     enter="transition ease-out duration-100"
     enterFrom="transform opacity-0 scale-95"
     enterTo="transform opacity-100 scale-100"
     leave="transition ease-in duration-75"
     leaveFrom="transform opacity-100 scale-100"
     leaveTo="transform opacity-0 scale-95"
     tailwindcssOriginClass
     >
      <Popover.Button as={PrimaryButton} className="uppercase font-bold" size={ButtonSize.M} icon={ArrowUpRightIcon}>
         <span className="sr-only">{open ? 'Open' : 'Close'} create menu</span>
             Get Started
         </Popover.Button>

         <Popover.Panel className="bg-blue rounded-3xl shadow-lg p-8 text-white">
             <Float.Arrow as="div" className="absolute bg-blue w-5 h-5 rotate-45" />

             <div className="relative">
                {...}
             </div>
         </Popover.Panel>
     </Float>
     )}
 </Popover>

[ycs77]

Hi @TheRealFlyingCoder, I can't reproduce this bug, please provide a minimally reproducible repo using GitHub or stackblitz, Online demo provided the <Float> stackblitz examples.

[TheRealFlyingCoder]

Hi @TheRealFlyingCoder, I can't reproduce this bug, please provide a minimally reproducible repo using GitHub or stackblitz, Online demo provided the <Float> stackblitz examples.

Weird, let me debug it a bit more and i'll get back to you with an example!

[TheRealFlyingCoder]

@ycs77 I should have picked this up straight away before raising the ticket:

floatingAs={Fragment}

That was the problem ^ switching to a div solved it