[Bug] UPopover appears on top of UModal based on component declaration order

[katrface]

Environment

Environment

Vite project info (@nuxt/ui/vite):

Operating system	Windows 11
CPU	13th Gen Intel(R) Core(TM) i7-13650HX
Node.js version	v24.15.0
Package manager	pnpm@11.0.9
Builder	vite@8.0.8

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.8.1

Reproduction

https://codesandbox.io/p/devbox/boring-dew-4myj43?workspaceId=ws_DQFGyLZQ7dm97uDZVPVdBv (fix permission)

Description

If I try to use the UModal and UPopover components in this order:

    <UModal>
      <UButton label="Open modal" color="neutral" variant="subtle" />

      <template #content>
        <div class="h-48 m-4">Some modal</div>
      </template>
    </UModal>

    <UPopover :dismissible="false">
      <UButton label="Open popover" color="neutral" variant="subtle" />

      <template #content>
        <div class="size-48 m-4 inline-flex">Some popover</div>
      </template>
    </UPopover>

When opening the popover first and then the modal, the popover appears on top of the modal.

If the components are declared in the opposite order, the bug no longer reproduces.

Additional context

No response

Logs

[katrface]

The bug also reproduces if the SFC with UPopover is used via defineAsyncComponent.

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const AsyncPopover = defineAsyncComponent(() => import('./components/PopoverSFC.vue'))
</script>

<template>
  <UApp>
    <AsyncPopover v-if="!!AsyncPopover" />
    <UModal>
      <UButton label="Open modal" color="neutral" variant="subtle" />

      <template #content>
        <div class="h-48 m-4">Some modal</div>
      </template>
    </UModal>
  </UApp>
</template>

Or any other condition where UPopover is rendered after UModal.

<script setup lang="ts">
import { ref } from 'vue'

const showPopover = ref<boolean>(false)
</script>

<template>
  <UApp>
    <UPopover v-if="showPopover" :dismissible="false">
      <UButton label="Open popover" color="neutral" variant="subtle" />

      <template #content>
        <div class="size-48 m-4 inline-flex">Some popover</div>
      </template>
    </UPopover>

    <UModal>
      <UButton label="Open modal" color="neutral" variant="subtle" @click="showPopover = true" />

      <template #content>
        <div class="h-48 m-4">Some modal</div>
      </template>
    </UModal>
  </UApp>
</template>

[katrface]

Most likely, changes need to be made to the rendering order mechanism in the portal, as the DOM tree differs only in this regard.

[al1maher]

I think this comes from Reka, but it needs more investigation