From 5435ce5cd90bc720120bc1004791ff4ff7224ad3 Mon Sep 17 00:00:00 2001
From: Zane Staggs <zane@squareup.com>
Date: Wed, 9 Jul 2025 19:20:12 -0700
Subject: [PATCH] fix not being able to select a model in dialog

---
 ui/desktop/src/components/ui/Select.tsx | 33 +++++++++++++++++--------
 ui/desktop/src/components/ui/dialog.tsx |  2 +-
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/ui/desktop/src/components/ui/Select.tsx b/ui/desktop/src/components/ui/Select.tsx
index cbcac3205c..db9452c638 100644
--- a/ui/desktop/src/components/ui/Select.tsx
+++ b/ui/desktop/src/components/ui/Select.tsx
@@ -6,23 +6,36 @@ export const Select = (props: React.ComponentProps<typeof ReactSelect>) => {
     <ReactSelect
       {...props}
       unstyled
+      isSearchable={props.isSearchable !== false}
+      closeMenuOnSelect={props.closeMenuOnSelect !== false}
+      blurInputOnSelect={props.blurInputOnSelect !== false}
       classNames={{
         container: () => 'w-full cursor-pointer relative z-[99999]',
         indicatorSeparator: () => 'h-0',
         control: ({ isFocused }) =>
           `border ${isFocused ? 'border-borderStandard' : 'border-borderSubtle'} focus:border-borderStandard hover:border-borderStandard rounded-md w-full px-4 py-2 text-sm text-textSubtle hover:cursor-pointer`,
         menu: () =>
-          'mt-1 bg-background-default border border-borderStandard rounded-md text-textSubtle overflow-hidden relative z-[99999] select__menu',
-        menuPortal: () => 'z-[99999] select__menu',
-        option: () => 'py-2 px-4 hover:cursor-pointer hover:bg-bgSubtle text-textStandard text-sm',
-      }}
-      menuPortalTarget={document.body}
-      styles={{
-        menuPortal: (base) => ({
-          ...base,
-          zIndex: 99999,
-        }),
+          'mt-1 bg-background-default border border-borderStandard rounded-md text-textSubtle overflow-hidden absolute z-[99999] select__menu',
+        option: ({ isFocused, isSelected, isDisabled }) => {
+          let classes = 'py-2 px-4 text-sm cursor-pointer';
+
+          if (isDisabled) {
+            classes += ' opacity-50 cursor-not-allowed';
+          } else if (isSelected) {
+            classes += ' bg-background-accent text-text-on-accent';
+          } else if (isFocused) {
+            classes += ' bg-background-muted text-textStandard';
+          } else {
+            classes += ' text-textStandard hover:bg-background-muted';
+          }
+
+          return classes;
+        },
       }}
+      menuShouldBlockScroll={false}
+      menuShouldScrollIntoView={true}
+      tabSelectsValue={true}
+      openMenuOnFocus={false}
     />
   );
 };
diff --git a/ui/desktop/src/components/ui/dialog.tsx b/ui/desktop/src/components/ui/dialog.tsx
index 3ba6cdbb9e..b05f910f01 100644
--- a/ui/desktop/src/components/ui/dialog.tsx
+++ b/ui/desktop/src/components/ui/dialog.tsx
@@ -30,7 +30,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     data-slot="dialog-overlay"
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/50',
       className
     )}
     {...props}