Skip to content

bug: live picker is not clickable inside Radix portal dialogs #113

@dergachoff

Description

@dergachoff

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:

  1. The picker can visually stack above the dialog but still lose pointer interaction.
  2. 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

  1. Open a Vite React app with a Radix DialogPrimitive.Portal.
  2. Put a selectable component inside DialogPrimitive.Content.
  3. Start Impeccable live mode.
  4. Select an element inside the dialog.
  5. Try to use the picker controls.

Expected: picker controls work and dialog stays open.
Actual: controls are unclickable or clicking them closes the dialog.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions