kaydwithers
commented
2 years ago I did not get this error from 1.6.2. I got it when I updated Nuxt from 3.0.0-rc.2 to 3.0.0-rc.3.
Closed neoighodaro closed 2 years ago
kaydwithers
commented
2 years ago I did not get this error from 1.6.2. I got it when I updated Nuxt from 3.0.0-rc.2 to 3.0.0-rc.3.
ChrisGV04
commented
2 years ago I also got the exact same error when updating to 1.6.2 and if I downgrade back to 1.6.1 the warning goes away and the transition works as normal.
LunarMelody
commented
2 years ago I was able to reproduce this on 1.6.3 and 1.6.2, downgrading to 1.6.1 helps. There's also a workaround to use TransitionRoot and TransitionChild, however, this makes the code look really messy.
ThenTech
commented
2 years ago Not sure if this is related, but I also noticed this recently (using v1.6.4), that possibly because of the addition of extra hidden buttons for the focus behaviour fix, something else broke related to transitions. After the transition is complete, the elements inside the transition don't actually unmount even after show is false.
So in my case:
Transition.show becomes trueshow gets set to falseDOM tree:
<div id="headlessui-portal-root">
<div> // outer div
<button hidden/>
<div>
<aside /> // My panel on which the transition occurs
</div>
<button hidden/>
</div>
</div>And this seems to apply on every instance I have with a Transition > Dialog > Transition.Child > *
Edit: After reverting to previous releases, the above occurs since v1.6.0
michaelboke
commented
2 years ago Yes i also see this issue Component inside <Transition> renders non-element root node that cannot be animated. since version 1.6.2, with 1.6.1 no error in thrown. And issue still exists in 1.6.5. Does anyone have a workaround example with TransitionGroups?
benkroeger
commented
2 years ago As a workaround, I am wrapping my PopoverPanel in an extra div:
<transition>
<!-- wrapping PopoverPanel in an extra `div` so the component inside `Transaction` is always an element (even when closed)
would otherwise emit warning from vue: "Component inside <Transition> renders non-element root node that cannot be animated."
-->
<div>
<PopoverPanel> </PopoverPanel>
</div>
</transition>I assume, this error is due to the PopoverPanel being unmounted when Popover is closed and thus the transition is empty - which then throws the error.
adamndev
commented
2 years ago I'm seeing this error with 1.6.5 after pasting Tailwind UI page examples.
Wrapping the PopoverPanel fixes the error as @benkroeger said, and I've used the slot prop to restore transform to the wrapping div for now.
<Popover as="header" class="relative" v-slot="{ open }">
<div v-if="open">
...
</div>
</Popover>Thanks @benkroeger and @adamndev, that workaround indeed helped and made the error disappear. Although i had to make the div relative as the popover panel i have inside it would otherwise jump around.
heychazza
commented
2 years ago As a workaround, I am wrapping my
PopoverPanelin an extra div:<transition> <!-- wrapping PopoverPanel in an extra `div` so the component inside `Transaction` is always an element (even when closed) would otherwise emit warning from vue: "Component inside <Transition> renders non-element root node that cannot be animated." --> <div> <PopoverPanel> </PopoverPanel> </div> </transition>I assume, this error is due to the
PopoverPanelbeing unmounted whenPopoveris closed and thus thetransitionis empty - which then throws the error.
Faced this issue and it was driving me crazy, this fixed it. Weirdly its still locking focus on mobile to my popover button, ugh
heychazza
commented
2 years ago 
Yep, seems to be a bug as part of this. The focus locks on
florian-lefebvre
commented
2 years ago I'm facing the same issue
florianschiesterl
commented
2 years ago Thanks for raising this issue. I'm facing the same problem.
RobinMalfait
commented
2 years ago 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.
I've updated your CodeSandbox with the insiders version: https://codesandbox.io/s/musing-forest-8i859i
RobinMalfait
commented
2 years ago @heychazza that's a different error. If this is still an issue, then please open a new issue with a minimal reproduction repo attached 🙏
florianschiesterl
commented
2 years ago @RobinMalfait thanks robin! 🙏
What package within Headless UI are you using? @headlessui/vue
What version of that package are you using?
v1.6.2
What browser are you using?
For example: Chrome, Safari, Firefox
Reproduction URL
https://codesandbox.io/s/sweet-bartik-5v3jt8
Describe your issue
When running the
PopoverPanelimmediately after a transition, you get an error:This does not happen in
v1.6.1. For now you can either use1.6.1or wrap thePopoverPanelwith adiv. The later will remove the warning, but also the transition.