[backport cloud/1.47] fix: render nested dropdown menus above modal overlays (#13798)

Backport of #13786 to `cloud/1.47`

Automatically created by backport workflow.

Co-authored-by: Dante <bunggl@naver.com>

Author: comfy-pr-bot

src/components/common/DropdownItem.vue

@@ -10,6 +10,7 @@ import {
 } from 'reka-ui'
 import { useI18n } from 'vue-i18n'
 import { toValue } from 'vue'
+import type { StyleValue } from 'vue'
 
 import { cn } from '@comfyorg/tailwind-utils'
 
@@ -19,7 +20,12 @@ defineOptions({
   inheritAttrs: false
 })
 
-defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
+defineProps<{
+  itemClass: string
+  contentClass: string
+  contentStyle?: StyleValue
+  item: MenuItem
+}>()
 </script>
 <template>
   <DropdownMenuSeparator
@@ -37,6 +43,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     <DropdownMenuPortal>
       <DropdownMenuSubContent
         :class="contentClass"
+        :style="contentStyle"
         :side-offset="2"
         :align-offset="-5"
       >
@@ -46,6 +53,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
           :item="subitem"
           :item-class
           :content-class
+          :content-style
         />
       </DropdownMenuSubContent>
     </DropdownMenuPortal>

src/components/common/DropdownMenu.vue

@@ -72,6 +72,7 @@ const contentStyle = useModalLiftedZIndex(open)
             :key="toValue(item.label) ?? index"
             :item-class
             :content-class
+            :content-style
             :item
           />
         </slot>

src/components/common/DropdownMenu.zindex.test.ts

@@ -1,7 +1,8 @@
 import { ZIndex } from '@primeuix/utils/zindex'
-import { render, screen } from '@testing-library/vue'
+import { render, screen, within } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
-import { afterEach, describe, expect, it } from 'vitest'
+import type { MenuItem } from 'primevue/menuitem'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json'
@@ -14,9 +15,9 @@ const i18n = createI18n({
   messages: { en: enMessages }
 })
 
-function renderMenu() {
+function renderMenu(entries: MenuItem[] = [{ label: 'Item A' }]) {
   return render(DropdownMenu, {
-    props: { entries: [{ label: 'Item A' }] },
+    props: { entries },
     global: { plugins: [i18n], directives: { tooltip: {} } }
   })
 }
@@ -53,4 +54,32 @@ describe('DropdownMenu z-index', () => {
     expect(menu.style.zIndex).toBe('')
     expect(menu.className).toContain('z-1700')
   })
+
+  it('opens a nested menu above a registered dialog', async () => {
+    openModal = document.createElement('div')
+    ZIndex.set('modal', openModal, 1700)
+    const dialogZ = Number(openModal.style.zIndex)
+    const command = vi.fn()
+    const user = userEvent.setup()
+    renderMenu([
+      {
+        label: 'Change role',
+        items: [
+          { label: 'Owner', command },
+          { label: 'Member', command }
+        ]
+      }
+    ])
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('menuitem', { name: 'Change role' }))
+
+    expect(await screen.findByRole('menuitem', { name: 'Owner' })).toBeVisible()
+    expect(screen.getByRole('menuitem', { name: 'Member' })).toBeVisible()
+    const submenu = screen
+      .getAllByRole('menu')
+      .find((menu) => within(menu).queryByRole('menuitem', { name: 'Owner' }))
+    expect(submenu).toBeDefined()
+    expect(Number(submenu?.style.zIndex)).toBeGreaterThan(dialogZ)
+  })
 })