Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Radix select does not respect click outside #6590

Closed
ruggi opened this issue Oct 25, 2024 · 0 comments · Fixed by #6591
Closed

Radix select does not respect click outside #6590

ruggi opened this issue Oct 25, 2024 · 0 comments · Fixed by #6591
Assignees
@ruggi

Comments

@ruggi
Copy link
Contributor

ruggi commented Oct 25, 2024

No description provided.

@ruggi ruggi self-assigned this Oct 25, 2024
@ruggi ruggi mentioned this issue Oct 25, 2024
Merged
ruggi added a commit that referenced this issue Oct 29, 2024
@ruggi
Prevent click outside for radix select inside inspector modal (#6591)
bcbd2e5 
**Problem:**

`RadixSelect` components inside inspector modals don't actually respect
their click outside handling, causing the _modal_ to close down, moving
focus back to whatever is behind, e.g. the canvas.

**Fix:**

The problem is that this happens because RadixSelects are rendered in
their own portal, which interferes with the one created by the inspector
modal.
I tried multiple ways, e.g. setting the `onPointerDownOutside` prop of
the Radix component itself, but it does not work. The _only_ thing that
seems to be working is adding an overlay div in the component's content
itself, which will handle closing the select gracefully (see the
recording please).

| Before | After |
|----------|---------|
| ![Kapture 2024-10-25 at 16 05
24](https://github.com/user-attachments/assets/3fb3a149-31e6-4ba4-85fc-673544d82f46)
| ![Kapture 2024-10-25 at 16 04
21](https://github.com/user-attachments/assets/50bf89d0-02a3-4deb-909b-6872897e2c57)
|

Fixes #6590
liady pushed a commit that referenced this issue Dec 13, 2024
@ruggi @liady
Prevent click outside for radix select inside inspector modal (#6591)
7fc2c43 
**Problem:**

`RadixSelect` components inside inspector modals don't actually respect
their click outside handling, causing the _modal_ to close down, moving
focus back to whatever is behind, e.g. the canvas.

**Fix:**

The problem is that this happens because RadixSelects are rendered in
their own portal, which interferes with the one created by the inspector
modal.
I tried multiple ways, e.g. setting the `onPointerDownOutside` prop of
the Radix component itself, but it does not work. The _only_ thing that
seems to be working is adding an overlay div in the component's content
itself, which will handle closing the select gracefully (see the
recording please).

| Before | After |
|----------|---------|
| ![Kapture 2024-10-25 at 16 05
24](https://github.com/user-attachments/assets/3fb3a149-31e6-4ba4-85fc-673544d82f46)
| ![Kapture 2024-10-25 at 16 04
21](https://github.com/user-attachments/assets/50bf89d0-02a3-4deb-909b-6872897e2c57)
|

Fixes #6590
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ruggi ruggi

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Prevent click outside for radix select inside inspector modal concrete-utopia/utopia
1 participant
@ruggi