Skip to content

Commit

Permalink
Prevent click outside for radix select inside inspector modal (#6591)
Browse files Browse the repository at this point in the history
**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
  • Loading branch information
ruggi authored Oct 29, 2024
1 parent 55ab421 commit bcbd2e5
Showing 1 changed file with 21 additions and 0 deletions.
21 changes: 21 additions & 0 deletions editor/src/uuiui/radix-components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -343,11 +343,21 @@ export const RadixSelect = React.memo(
return fullOptions
}, [props.options, props.value, props.allowedValues])

const onMouseDownOutside = React.useCallback(
(e: React.MouseEvent) => {
e.stopPropagation()
e.preventDefault()
onOpenChange(false)
},
[onOpenChange],
)

return (
<Select.Root
value={props.value?.value}
onValueChange={props.onValueChange}
onOpenChange={onOpenChange}
open={isOpen}
>
<Select.Trigger
style={{
Expand Down Expand Up @@ -390,6 +400,17 @@ export const RadixSelect = React.memo(
...(props.contentStyle ?? {}),
}}
>
<div
style={{
backgroundColor: 'transparent',
position: 'fixed',
top: 0,
left: 0,
bottom: 0,
right: 0,
}}
onMouseDown={onMouseDownOutside}
/>
<Select.ScrollUpButton>
<Icons.ExpansionArrow color='on-highlight-main' />
</Select.ScrollUpButton>
Expand Down

0 comments on commit bcbd2e5

Please sign in to comment.