React warning `Warning: Function components cannot be given refs.` and wrong visual placement of combobox options, when using `as={React.Fragment}` alongside Framer Motion's `motion.div` and `AnimatePresence` for immediate comboboxes #3384
The reproduction above sets up the following scenario:
A Combobox with immediate
The child of Combobox is a function, in order to access the open property
AnimatePresence and motion.div from Framer Motion is used to animate the appearance of the ComboboxOptions
The as of ComboboxOptions is a React.Fragment, in order to have full control of property shadowing on ComboboxOptions vs motion.div
The documentation for "Animating with Framer Motion" shows how to use a function child, read the open property, and combine that with AnimatePresence and motion.div to animate the appearance and disappearance of the combobox options.
This does not seem to combine with the approach proposed in #3333. Version 2.1.2 added a transition property to ComboboxOptions that shadows the transition property of motion.div. To solve this shadowing, we can set the as of the ComboboxOptions to a Fragment, and manually render the motion.div as the immediate child of ComboboxOptions. However, that results in the issue reproduced in the codesandbox above, where a React warning is triggered, and the visual placement of the combobox options box is wrong.
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
2.1.2
What browser are you using?
Firefox
Reproduction URL
https://codesandbox.io/p/devbox/cool-moon-x4447s
Describe your issue
The reproduction above sets up the following scenario:
ComboboxwithimmediateComboboxis a function, in order to access theopenpropertyAnimatePresenceandmotion.divfrom Framer Motion is used to animate the appearance of theComboboxOptionsasofComboboxOptionsis aReact.Fragment, in order to have full control of property shadowing onComboboxOptionsvsmotion.divThe documentation for "Animating with Framer Motion" shows how to use a function child, read the
openproperty, and combine that withAnimatePresenceandmotion.divto animate the appearance and disappearance of the combobox options.https://headlessui.com/react/combobox#animating-with-framer-motion
This does not seem to combine with the approach proposed in #3333. Version 2.1.2 added a
transitionproperty toComboboxOptionsthat shadows thetransitionproperty ofmotion.div. To solve this shadowing, we can set theasof theComboboxOptionsto aFragment, and manually render themotion.divas the immediate child ofComboboxOptions. However, that results in the issue reproduced in the codesandbox above, where a React warning is triggered, and the visual placement of the combobox options box is wrong.