N
NuxtDavid

[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.

Hello everyone ! I've tried to make a combobox with an appear animation of the popper but I have the error:
[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.
at <Teleport disabled=false forceMount=true to=undefined >
at <ComboboxPortal forceMount="" >
at <BaseTransition appear=false persisted=false mode=undefined ... >
at <Transition name="fade" >
at <Primitive ref=fn<s> style=
Object { pointerEvents: undefined }
as=undefined ... >
at <PopperRoot class="w-[200px]" >
at <ComboboxRoot modelValue="" onUpdate:modelValue=fn class="w-[200px]" >
at <Combobox modelValue="" onUpdate:modelValue=fn options=
Array(3) [ "Option 1", "Option 2", "Option 3" ]
... >
at <App key=3 >
at <NuxtRoot>
[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.
at <Teleport disabled=false forceMount=true to=undefined >
at <ComboboxPortal forceMount="" >
at <BaseTransition appear=false persisted=false mode=undefined ... >
at <Transition name="fade" >
at <Primitive ref=fn<s> style=
Object { pointerEvents: undefined }
as=undefined ... >
at <PopperRoot class="w-[200px]" >
at <ComboboxRoot modelValue="" onUpdate:modelValue=fn class="w-[200px]" >
at <Combobox modelValue="" onUpdate:modelValue=fn options=
Array(3) [ "Option 1", "Option 2", "Option 3" ]
... >
at <App key=3 >
at <NuxtRoot>
Here is the layout of my component :
<ComboboxRoot>
<ComboboxAnchor>
<ComboboxTrigger>
...
</ComboboxTrigger>
</ComboboxAnchor>

<Transition name="fade">
<ComboboxPortal forceMount>
<ComboboxContent position="popper">
<ComboboxViewport>
<div>
<ComboboxInput />
</div>
<ComboboxGroup>
<ComboboxItem>
<span>...</span>
<ComboboxItemIndicator>
</ComboboxItemIndicator>
</ComboboxItem>
</ComboboxGroup>

<ComboboxEmpty />
</ComboboxViewport>
</ComboboxContent>
</ComboboxPortal>
</Transition>
</ComboboxRoot>
<ComboboxRoot>
<ComboboxAnchor>
<ComboboxTrigger>
...
</ComboboxTrigger>
</ComboboxAnchor>

<Transition name="fade">
<ComboboxPortal forceMount>
<ComboboxContent position="popper">
<ComboboxViewport>
<div>
<ComboboxInput />
</div>
<ComboboxGroup>
<ComboboxItem>
<span>...</span>
<ComboboxItemIndicator>
</ComboboxItemIndicator>
</ComboboxItem>
</ComboboxGroup>

<ComboboxEmpty />
</ComboboxViewport>
</ComboboxContent>
</ComboboxPortal>
</Transition>
</ComboboxRoot>
L
l422y12d ago
what's your ComboboxPortal code look like
D
David12d ago
You have the layout but here it is in more details :
<ComboboxPortal forceMount>
<ComboboxContent position="popper" class="w-[--radix-combobox-trigger-width]">
<ComboboxViewport class="flex flex-col">
<div>
<Icon name="radix-icons:magnifying-glass"/>
<ComboboxInput placeholder="Search..." />
</div>
<ComboboxGroup>
<ComboboxItem
v-for="(option, item) of options"
:key="item"
:value="option"
class="data-[highlighted]:bg-gray-100"
>
<span>{{ option }}</span>
<ComboboxItemIndicator class="flex items-center">
<Icon name="radix-icons:check" />
</ComboboxItemIndicator>
</ComboboxItem>
</ComboboxGroup>
<ComboboxEmpty />
</ComboboxViewport>
</ComboboxContent>
</ComboboxPortal>
<ComboboxPortal forceMount>
<ComboboxContent position="popper" class="w-[--radix-combobox-trigger-width]">
<ComboboxViewport class="flex flex-col">
<div>
<Icon name="radix-icons:magnifying-glass"/>
<ComboboxInput placeholder="Search..." />
</div>
<ComboboxGroup>
<ComboboxItem
v-for="(option, item) of options"
:key="item"
:value="option"
class="data-[highlighted]:bg-gray-100"
>
<span>{{ option }}</span>
<ComboboxItemIndicator class="flex items-center">
<Icon name="radix-icons:check" />
</ComboboxItemIndicator>
</ComboboxItem>
</ComboboxGroup>
<ComboboxEmpty />
</ComboboxViewport>
</ComboboxContent>
</ComboboxPortal>
L
l422y12d ago
i mean the ComboboxPortal component
D
David12d ago
Oh this is a Component from radix-vue lib https://www.radix-vue.com/components/combobox.html#portal
Radix Vue
Unstyled, accessible components for building high‑quality design systems and web apps in Vue
L
l422y12d ago
will probably work if you wrap it in an html element
D
David12d ago
?
L
l422y12d ago
put a div around ComboboxPortal
D
David12d ago
Oh ok it works, but the documentation of radix-vue is blured But the transition will not work because there is no v-if
L
l422y12d ago
so put one.. not sure how you are trying to transition but the ComboboxPortal component sems to not be compatible with Transiition
D
David12d ago
But in the radix-vue documentation it says forceMount (on ComboboxPortal) Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
L
l422y12d ago
that doesn't really mean it's going to be compatible with Transition
D
David12d ago
So what does it mean ?
L
l422y12d ago
no idea, but it's exposing non-root elements that won't work, so you have to wrap it i'm not really familiar with the library, if you want to create a minimal reproduction of this issue you are experiencing on stackblitz i am happy to take a look
D
David12d ago
L
l422y12d ago
GitHub
[Bug]: Out animation doesn't work for Select and DropdownMenu w...
Link to minimal reproduction https://stackblitz.com/edit/8sgcno?file=src%2FApp.vue Steps to reproduce I used playground example from shadcn-vue and modified it with :modal="false" on the ...
L
l422y12d ago
i tried moving things around (i.e. not transitioning the portal, but ComboboxContent) and still have issues
D
David11d ago
:usefetchwrong: :vue: So there is no solutions @L422Y ?
L
l422y11d ago
you'd need to file an issue in the radix-vue repo, that's where the issue is, it's not a nuxt issue it's radix-vue / vue
D
David11d ago
👍
D
David11d ago
GitHub
[Bug]: Vue Transition with Combobox · Issue #821 · radix-vue/radix-...
Environment Developement/Production OS: Windows 11 Node version: 20.10.0 Package manager: pnpm@8.15.4 Radix Vue version: 1.6.1 Vue version: 3.4.21 Nuxt version: 3.11.1 Nuxt mode: universal Nuxt tar...
Want results from more Discord servers?
Add your server
More Posts
Where to fetch initial user dataWhat is the best practice to load initial user data? Currently I do it in the default.vue layout inProtecting static folder on server sideI have a folder with statically built HTML, CSS and JS assets (think static dashboard) that I wouldnuxt v2 upgrade to v3 errorHello guys, we have project which is build with nuxt v2, but now i updated it to v3, and im getting [RESOLVED] Nuxt3 and netlify hosting env variablesHey! First of all "Nuxt3 is epic!". But I need some help with Nuxt 3 Netlify environment variables. Nuxt 3 dayjs moduleI try to use dayjs module in my pnpm monorepo i follow all the documentation but when i use dayjs iHow to set meta theme-color in nuxt.config``` app: { head: { ... meta: [{ theme_color: '#ffffff', }], }, },``` Testing Nuxt 3 API EndpointsHi, I would like to test my Nuxt 3 server api endpoints. I know I could test it for example in posNitro: How do I pass data in a middleware to route handlers?In Express, you can do this attaching data to the `response.locals` object. How do I do this in NitrMake `useRoute()` update in layoutHi! Im trying to use useRoute() in a layout, to update my navigations links based on the ´route.paraHow do you set a PostCSS parser in the `nuxt.config.ts`?I'm trying to do that but it seems the "parser" option isn't allowed on the object.Auto-import only Nuxt and Vue features but no custom or third party codeHey! I wonder: is it possible to disable auto imports for components, composables, and utils while kuseAsyncData weird behaviorHi guys, I'm experiencing a strange behavior. I'm using async data to call an API. But there is a coProblem with sending POST/GET Request at the same timeNow I'm looking to load the last projects of a user from the database by sending his name and receivNuxt Content behind CloudflareWhen I use Nuxt Content behind Cloudflare, I have the issue that some pages (but not all) cannot be Odd situation with Nuxt hosting and site accessibilityHey everyone. First post on this Discord. We have a Nuxt app (an intranet, small company app) that wUButton showing over sticky headerI have a table and one of the columns is filled with Nuxt UI buttons. I have a sticky header for thiPinia as a layerHi, I’m learning pinia, and I like it so much I thought it should be a layer. Does it makes sense? IFetchError typeI've seen `import type { FetchError } from 'ofetch'`, what what's the correct module when handling `How to import functions in a .vue component from a .js file?import { myfunctions} from "/js/stats.js" doesnt work for me: Error 500 __vite_ssr_import_7__.defauskeleton does not work on dynamic routesguys, can anyone help me? the skeleton is appearing on the main page but on the page where the produ