From 13cad3d6db8179306a2d595ca5b3da1a84d9070c Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:03:15 +0200
Subject: [PATCH] prevent click outside react select

---
 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>