fix(dialog): share PrimeVue ZIndex counter so stacked dialogs stack correctly

PrimeVue auto-increments a per-key z-index counter, so later-opened
PrimeVue dialogs reliably cover earlier ones. Reka, however, uses a
static z-1700 class — which lost to any PrimeVue modal already on the
counter. Concretely: open Save As (PrimeVue, z-1801) then trigger the
Overwrite confirm (Reka, z-1700) and the confirm rendered behind Save
As's mask, so Playwright clicks on the Overwrite button were absorbed
by .p-dialog-mask.

Register every Reka DialogOverlay + DialogContent with PrimeVue's
ZIndex.set('modal', el, 1700) on mount via a v-reka-z-index directive,
and ZIndex.clear on unmount. Both renderers now share one stacking
sequence — whichever dialog opened last wins, regardless of which
library owns it.
This commit is contained in:
dante01yoon
2026-05-19 10:26:47 +09:00
parent 8d9c5d3fff
commit 799c53ff7f
2 changed files with 23 additions and 1 deletions

View File

@@ -8,8 +8,12 @@
@update:open="(open) => onRekaOpenChange(item.key, open)"
>
<DialogPortal>
<DialogOverlay :class="item.dialogComponentProps.overlayClass" />
<DialogOverlay
v-reka-z-index
:class="item.dialogComponentProps.overlayClass"
/>
<DialogContent
v-reka-z-index
:size="item.dialogComponentProps.size ?? 'md'"
:maximized="!!item.dialogComponentProps.maximized"
:class="item.dialogComponentProps.contentClass"
@@ -118,6 +122,7 @@ import {
onRekaFocusOutside,
onRekaPointerDownOutside
} from '@/components/dialog/rekaPrimeVueBridge'
import { vRekaZIndex } from '@/components/dialog/vRekaZIndex'
import type { DialogInstance } from '@/stores/dialogStore'
import { useDialogStore } from '@/stores/dialogStore'

View File

@@ -0,0 +1,17 @@
import { ZIndex } from '@primeuix/utils/zindex'
import type { Directive } from 'vue'
// Both Reka and PrimeVue dialogs can appear at any depth in dialogStack, in
// any order. PrimeVue auto-increments a per-key z-index counter so later
// dialogs always cover earlier ones; Reka uses a static z-1700 class which
// can lose to an already-open PrimeVue dialog. Registering Reka's content
// element with the same ZIndex counter (key 'modal', base 1700) makes both
// renderers share one stacking sequence: whichever dialog opens last wins.
export const vRekaZIndex: Directive<HTMLElement> = {
mounted(el) {
ZIndex.set('modal', el, 1700)
},
beforeUnmount(el) {
ZIndex.clear(el)
}
}