WildDragonLLC/claudecodeui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: model dropdown items clickable (onMouseDown + raise z-index above messages pane)

Browse source
This commit is contained in:
Zac Gaetano 2026-05-30 10:22:28 -04:00
parent 1f7634fba9
commit 11dd86c49b
1 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/chat/view/subcomponents/ModelSelectorBar.tsx
View file

@ -72,7 +72,7 @@ export default function ModelSelectorBar({
? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
: options; : options;
// Close on outside click // Close on outside click (use click, not mousedown, so item selection fires first)
useEffect(() => { useEffect(() => {
if (!open) return; if (!open) return;
const handler = (e: MouseEvent) => { const handler = (e: MouseEvent) => {
@ -81,8 +81,8 @@ export default function ModelSelectorBar({
setSearch(''); setSearch('');
} }
}; };
document.addEventListener('mousedown', handler); document.addEventListener('click', handler);
return () => document.removeEventListener('mousedown', handler); return () => document.removeEventListener('click', handler);
}, [open]); }, [open]);
useEffect(() => { useEffect(() => {
@ -103,7 +103,7 @@ export default function ModelSelectorBar({
}; };
return ( 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 */} {/* Left: provider label */}
<div className="flex items-center gap-2 text-xs text-muted-foreground"> <div className="flex items-center gap-2 text-xs text-muted-foreground">
<SessionProviderLogo provider={provider} className="h-3.5 w-3.5" /> <SessionProviderLogo provider={provider} className="h-3.5 w-3.5" />
@ -123,13 +123,14 @@ export default function ModelSelectorBar({
</button> </button>
{open && ( {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"> <div className="p-2 border-b border-border/40">
<input <input
ref={searchRef} ref={searchRef}
type="text" type="text"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
onClick={(e) => e.stopPropagation()}
placeholder="Search models..." 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" 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 <button
key={opt.value} key={opt.value}
type="button" type="button"
onClick={() => handleSelect(opt.value)} onMouseDown={(e) => {
className={`w-full text-left px-3 py-1.5 text-xs transition-colors hover:bg-accent/60 ${ // 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' opt.value === value ? 'text-primary font-medium' : 'text-foreground'
}`} }`}
> >