Problem
When using Impeccable live mode on an element inside a Radix Dialog portal, the picker UI renders visually above the dialog but is not reliably clickable.
This happened in a Vite React app with a full-screen Radix lightbox. The selected element was an aside inside DialogPrimitive.Content.
Observed behavior
- The Impeccable picker chrome appeared over the lightbox.
- Picker buttons were initially not clickable.
- After locally forcing
pointer-events: auto on Impeccable chrome, clicks reached the picker, but Radix treated them as outside interactions and closed the dialog.
- The picker UI is mounted under
document.body, while the selected element is inside the Radix portal/dialog subtree.
Expected behavior
Impeccable picker controls should remain clickable and should not close the host dialog when the selected element is inside a modal/portal.
Likely root cause
Radix modal dialogs can apply modal pointer/focus behavior around the active Dialog.Content. Impeccable mounts its picker chrome outside that dialog subtree, so:
- The picker can visually stack above the dialog but still lose pointer interaction.
- Once pointer events are restored, Radix
DismissableLayer can classify picker clicks as outside the dialog.
Suggested fix
Make live picker chrome modal-aware:
- If an active modal/dialog exists, mount Impeccable UI inside the active dialog subtree, for example the topmost
[role="dialog"][data-state="open"] / [role="alertdialog"][data-state="open"].
- Ensure picker root elements explicitly set
pointer-events: auto.
- Alternatively, mark/intercept Impeccable UI interactions so Radix outside-interaction handlers do not treat them as dismissing clicks.
Repro shape
- Open a Vite React app with a Radix
DialogPrimitive.Portal.
- Put a selectable component inside
DialogPrimitive.Content.
- Start Impeccable live mode.
- Select an element inside the dialog.
- Try to use the picker controls.
Expected: picker controls work and dialog stays open.
Actual: controls are unclickable or clicking them closes the dialog.
Problem
When using Impeccable live mode on an element inside a Radix Dialog portal, the picker UI renders visually above the dialog but is not reliably clickable.
This happened in a Vite React app with a full-screen Radix lightbox. The selected element was an
asideinsideDialogPrimitive.Content.Observed behavior
pointer-events: autoon Impeccable chrome, clicks reached the picker, but Radix treated them as outside interactions and closed the dialog.document.body, while the selected element is inside the Radix portal/dialog subtree.Expected behavior
Impeccable picker controls should remain clickable and should not close the host dialog when the selected element is inside a modal/portal.
Likely root cause
Radix modal dialogs can apply modal pointer/focus behavior around the active
Dialog.Content. Impeccable mounts its picker chrome outside that dialog subtree, so:DismissableLayercan classify picker clicks as outside the dialog.Suggested fix
Make live picker chrome modal-aware:
[role="dialog"][data-state="open"]/[role="alertdialog"][data-state="open"].pointer-events: auto.Repro shape
DialogPrimitive.Portal.DialogPrimitive.Content.Expected: picker controls work and dialog stays open.
Actual: controls are unclickable or clicking them closes the dialog.