mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-18 17:58:23 +00:00
bab2a22428
## Summary Restore the backdrop scrim on Reka dialogs opened with `modal: false` (Settings, Manager, legacy-team subscription) — reka-ui only renders `DialogOverlay` for modal roots, so these dialogs silently lost their backdrop when they moved to the Reka renderer. ## Changes - **What**: `src/components/ui/dialog/DialogOverlay.vue` injects `injectDialogRootContext()` (public reka-ui export) and branches: modal dialogs keep Reka's `DialogOverlay`; non-modal dialogs render a plain backdrop `div` wrapped in Reka's `Presence` (`:present="forceMount || open"`), so it honors `forceMount` and plays the `data-[state=closed]` exit fade in sync with the content. Both branches carry `data-testid="dialog-overlay"`. - **Popover stacking**: the scrim/content carry inline z-indexes from @primeuix's `'modal'` counter, which body-portaled popovers with a static `z-1700` class lost to. Extracted `DropdownMenu.vue`'s existing lift into `useModalLiftedZIndex` and applied it to `ColorPicker.vue` and the shared `ui/Popover.vue`, so they stack above the top-most dialog (verified live: scrim 1701 < content 1702 < picker 1703, panel clickable, Settings stays open). ## Review Focus - **Why not `modal: true`**: Settings/Manager intentionally opt out of Reka's modal mode because its focus trap + body `pointer-events: none` break nested PrimeVue overlays teleported to body (see comments in `useSettingsDialog.ts` / `useManagerDialog.ts`). The fallback restores only the visual scrim; body pointer-events stay `auto`. - **Dismissal semantics unchanged**: the scrim sits outside Reka's `DismissableLayer`, so a pointerdown on it goes through the existing `onRekaPointerDownOutside` bridge — scrim click dismisses the top-most dialog, exactly like the modal overlay path (unit-covered). - **CustomizationDialog also gains its scrim back**: the bookmark-folder Customize dialog renders `:modal="false"` with an explicit `<DialogOverlay />`, so it picks up the backdrop too (its template always intended one); its ColorPicker popover is covered by the z-index lift above. A test pins that a mounted-but-closed non-modal root renders no scrim (CustomizationDialog mounts with `open: false`). Verified live (dev): scrim renders behind Settings; nested Modify-Keybinding dialog opens/focuses over it without dismissing Settings; scrim click closes Settings; `Comfy.Load3D.BackgroundColor` color picker opens above the scrim and is fully interactive; no new console warnings. Unit tests are red without the fix, green with it. Reported in Slack (FE Main), design confirmed scrims are intended. ## Screenshots Images hosted on a fork-only branch (`pr-assets/13502-scrim`), not part of this PR's history. | Before (`modal: false` — no scrim) | After | | --- | --- | | <img width="480" alt="before" src="https://raw.githubusercontent.com/dante01yoon/ComfyUI_frontend/pr-assets/13502-scrim/.github/pr-assets/settings-scrim-before.png" /> | <img width="480" alt="after" src="https://raw.githubusercontent.com/dante01yoon/ComfyUI_frontend/pr-assets/13502-scrim/.github/pr-assets/settings-scrim-after.png" /> | Color picker stacking above the scrim (z-index lift): <img width="640" alt="color picker above scrim" src="https://raw.githubusercontent.com/dante01yoon/ComfyUI_frontend/pr-assets/13502-scrim/.github/pr-assets/settings-colorpicker-above-scrim.png" />
