New `transition` property in 2.1 shadows `transition` property from framer motion when using `as` on `ComboboxOptions` about headlessui HOT 1 CLOSED

Hey!

Unfortunately the way the as prop works means that we merge all the props from our component ComboboxOptions and the underlying component motion.dev. This means that technically speaking every new feature we add could lead to problems when prop names collide.

The good thing is that the as={Component} prop is just a shorthand, but you can write the tiny bit longer form to make it work:

<ComboboxOptions as={Fragment}>
  <motion.div     
    transition={{ease: "linear", duration: 2}}
    initial={{ y: -20, opacity: 0 }}
    animate={{ y: 0, opacity: 1 }}
    exit={{ y: -20, opacity: 0 }}>
    …
  </motion.div>
</ComboboxOptions>

Whenever you use as={Fragment}, Headless UI will forward the internal DOM related props to the first child, in this case motion.div, but this will only include DOM related props such as attributes (aria-*, data-*, ...) and event listeners (onClick, ...)

This way the transition prop doesn't conflict.

Hope this helps!

from headlessui.