From bcbd2e58b94574fb330ffcfe278f46e186aae981 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:44:32 +0100
Subject: [PATCH] Prevent click outside for radix select inside inspector modal
 (#6591)

**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
---
 editor/src/uuiui/radix-components.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index 77feb64fe1db..db93aa8df623 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -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={{
@@ -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>