From 11dd86c49b4c53c8cd286f804d26fb126cac6d8c Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Sat, 30 May 2026 10:22:28 -0400
Subject: [PATCH] fix: model dropdown items clickable (onMouseDown + raise
 z-index above messages pane)

---
 .../view/subcomponents/ModelSelectorBar.tsx   | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/view/subcomponents/ModelSelectorBar.tsx b/src/components/chat/view/subcomponents/ModelSelectorBar.tsx
index 838d4cd..9a8ae3b 100644
--- a/src/components/chat/view/subcomponents/ModelSelectorBar.tsx
+++ b/src/components/chat/view/subcomponents/ModelSelectorBar.tsx
@@ -72,7 +72,7 @@ export default function ModelSelectorBar({
     ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
     : options;
 
-  // Close on outside click
+  // Close on outside click (use click, not mousedown, so item selection fires first)
   useEffect(() => {
     if (!open) return;
     const handler = (e: MouseEvent) => {
@@ -81,8 +81,8 @@ export default function ModelSelectorBar({
         setSearch('');
       }
     };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
+    document.addEventListener('click', handler);
+    return () => document.removeEventListener('click', handler);
   }, [open]);
 
   useEffect(() => {
@@ -103,7 +103,7 @@ export default function ModelSelectorBar({
   };
 
   return (
-    <div className="flex-shrink-0 flex items-center justify-between px-4 py-1.5 border-b border-border/40 bg-muted/20 backdrop-blur-sm">
+    <div className="relative z-40 flex-shrink-0 flex items-center justify-between px-4 py-1.5 border-b border-border/40 bg-muted/20 backdrop-blur-sm">
       {/* Left: provider label */}
       <div className="flex items-center gap-2 text-xs text-muted-foreground">
         <SessionProviderLogo provider={provider} className="h-3.5 w-3.5" />
@@ -123,13 +123,14 @@ export default function ModelSelectorBar({
         </button>
 
         {open && (
-          <div className="absolute right-0 top-full mt-1.5 z-50 w-64 rounded-xl border border-border/60 bg-card shadow-xl overflow-hidden">
+          <div className="absolute right-0 top-full mt-1.5 z-[100] w-64 rounded-xl border border-border/60 bg-card shadow-2xl overflow-hidden">
             <div className="p-2 border-b border-border/40">
               <input
                 ref={searchRef}
                 type="text"
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
                 placeholder="Search models..."
                 className="w-full rounded-lg bg-muted/50 px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/50 outline-none border border-border/40 focus:border-border"
               />
@@ -142,8 +143,13 @@ export default function ModelSelectorBar({
                   <button
                     key={opt.value}
                     type="button"
-                    onClick={() => handleSelect(opt.value)}
-                    className={`w-full text-left px-3 py-1.5 text-xs transition-colors hover:bg-accent/60 ${
+                    onMouseDown={(e) => {
+                      // Fire on mousedown so selection wins before any blur/outside-click handler
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelect(opt.value);
+                    }}
+                    className={`w-full text-left px-3 py-1.5 text-xs transition-colors hover:bg-accent/60 cursor-pointer ${
                       opt.value === value ? 'text-primary font-medium' : 'text-foreground'
                     }`}
                   >