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;
// 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'
}`}
>