[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:
Here is the layout of my component :
[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>
