mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-24 06:35:10 +00:00
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:
@@ -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'
|
||||
|
||||
|
||||
17
src/components/dialog/vRekaZIndex.ts
Normal file
17
src/components/dialog/vRekaZIndex.ts
Normal 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)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user