Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Transitions form TailwindUI examples (using Headless UI popover components ) do not work

See original GitHub issue

What package within Headless UI are you using? @headlessui/vue

What version of that package are you using? v1.6.5

What browser are you using? Chrome and Safari

Describe your issue

Just use any code from Tailwind UI > Marketing > Elements > Flyout Menus with Vue. Transitions do not work:

[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
  at <PopoverPanel class="absolute z-10 inset-x-0 transform shadow-lg" > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 -translate-y-1" enter-to-class="opacity-100 translate-y-0"  ... > 
  at <Popover class="z-0 relative" > 
  at <Menu> 
  at <App>

Looks like components do not have a single root element.

Issue Analytics

State:
Created a year ago
Reactions:6
Comments:10

Top GitHub Comments

2reactions

RobinMalfaitcommented, Jul 7, 2022

Just released 1.6.6!

2reactions

RobinMalfaitcommented, Jul 7, 2022

Hey! Thank you for your bug report! Much appreciated! 🙏

This should be fixed by #1653, and will be available in the next release.

You can already try it using npm install @headlessui/vue@insiders.

Top Results From Across the Web

Popover

Each component exposes information about its current state via render props that you can use to conditionally apply different styles or render different...

How to Use the Dialog Component with Headless UI and ...

Easily create a dialog component with Tailwind CSS.

Headless UI v1.0

The new Popover component lets you build custom dropdown UIs that don't have any content restrictions like a regular Menu component would. Great ......

Headless you popover does not work on clicking in react

This seems to be a compatibility issue with React 18. You can use the insiders build to make it work. Uninstall the Headless...

Tailwind CSS Components

Beautiful UI components, crafted with Tailwind CSS. ... Interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you'd...