Nuxt•4mo ago

[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>

4 Replies

David•4mo 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>

David•4mo 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

David•4mo 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 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. So what does it mean ? Ok I will do it Here it is : https://stackblitz.com/edit/nuxt-starter-chghww :usefetchwrong: :vue: So there is no solutions @L422Y ? 👍

David•4mo ago

https://github.com/radix-vue/radix-vue/issues/821

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...

Gaming

Programming

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