Position is broken when using `as=ComponentType`

[JesusTheHun]

Use version when bugs appear:

• Headless UI: v1.6.6
• Headless UI Float: v0.7.0
• Framework: react v18.0
• Browser: chrome

Describe the bug

Repro URL : https://stackblitz.com/edit/github-k6mhmk?file=package.json I took your Stackblitz and added the repro below the Listbox & Combobox example. The components are exactly the same except for the title and the usage of as;

If you set the as property of Float to be a component instead of a string or undefined, the positioning breaks and behave unexpectedly.

To Reproduce Just set a component as the as property of Float to a component

[ycs77]

The as property is a wrapper around the floating element of Float, usually using a div, span or Fragment (is no wrapper) to wrap around the floating element.

This bug is currently I won't to resolve unless you have a real use case for using this. 😅

[JesusTheHun]

I have a real use case for it : I need to apply classes to the Float wrapper.

If you don't want to support those components then you should change the property type since its not React.ElementType.

[JesusTheHun]

Side note : don't close people's issue before hearing their point, it's perceived as really rude.

[ycs77]

This not a bug, must use forwardRef instead FunctionComponent.

Original:

const DummyDiv: React.FC<React.PropsWithChildren> = ({ children, ...restProps }) => {
  return <div {...restProps}>{children}</div>
}

Change to:

const DummyDiv = React.forwardRef<any, { children: any, style: any }>(({ children, ...otherProps }, ref) => {
  return <div {...otherProps} ref={ref}>{children}</div>
})

Then work.

[JesusTheHun]

Alright thanks ! A quick mention in the documentation would be great :)