[BUG] Introduced in 1.6.2: Component inside <Transition> renders non-element root node that cannot be animated. #1483
Comments
|
I did not get this error from |
|
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. |
|
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 package.json{
"name": "gvp",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview --port 5050",
"typecheck": "vue-tsc --noEmit",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"@heroicons/vue": "^1.0.6",
"dayjs": "^1.11.2",
"pinia": "^2.0.14",
"vue": "^3.2.36",
"vue-i18n": "^9.1.10",
"vue-router": "^4.0.15"
},
"devDependencies": {
"@headlessui/vue": "1.6.3",
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
"@rushstack/eslint-patch": "^1.1.0",
"@trivago/prettier-plugin-sort-imports": "^3.2.0",
"@types/lodash-es": "^4.17.6",
"@types/node": "^16.11.27",
"@vitejs/plugin-vue": "^2.3.1",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"@vue/tsconfig": "^0.1.3",
"autoprefixer": "^10.4.7",
"eslint": "^8.5.0",
"eslint-plugin-vue": "^8.2.0",
"lodash-es": "^4.17.21",
"postcss": "^8.4.13",
"prettier": "^2.5.1",
"sass": "^1.51.0",
"stylelint": "^14.8.2",
"stylelint-config-recommended": "^7.0.0",
"tailwindcss": "^3.0.24",
"typescript": "~4.6.3",
"vite": "^2.9.5",
"vue-tsc": "^0.34.7"
}
}yarn.lock |
|
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 So in my case:
DOM 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 Edit: After reverting to previous releases, the above occurs since v1.6.0 |
|
Yes i also see this issue |
|
As a workaround, I am wrapping my <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 |
|
I'm seeing this error with 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. |
Faced this issue and it was driving me crazy, this fixed it. Weirdly its still locking focus on mobile to my popover button, ugh |
|
|
|
I'm facing the same issue |
vincentbernat
added a commit
to akvorado/akvorado
that referenced
this issue
Jun 29, 2022
|
Thanks for raising this issue. I'm facing the same problem. |
|
Hey! Thank you for your bug report! This should be fixed by #1653, and will be available in the next release. You can already try it using I've updated your CodeSandbox with the |
|
@heychazza that's a different error. If this is still an issue, then please open a new issue with a minimal reproduction repo attached 🙏 |
|
@RobinMalfait thanks robin! 🙏 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.The text was updated successfully, but these errors were encountered: