From 799c53ff7f8dfaa531f1400c8d99c5a3b414f090 Mon Sep 17 00:00:00 2001
From: dante01yoon <bunggl@naver.com>
Date: Tue, 19 May 2026 10:26:47 +0900
Subject: [PATCH] fix(dialog): share PrimeVue ZIndex counter so stacked dialogs
 stack correctly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/components/dialog/GlobalDialog.vue |  7 ++++++-
 src/components/dialog/vRekaZIndex.ts   | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/components/dialog/vRekaZIndex.ts

diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index f1fe850fc8..f00d723623 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -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'
 
diff --git a/src/components/dialog/vRekaZIndex.ts b/src/components/dialog/vRekaZIndex.ts
new file mode 100644
index 0000000000..3e4540119e
--- /dev/null
+++ b/src/components/dialog/vRekaZIndex.ts
@@ -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)
+  }
+}