From e6c525b01ee1b21e2bece33429ba73e5f296a0c8 Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Sun, 31 May 2026 01:07:57 -0700
Subject: [PATCH] perf: clean combobox focus frame effects (#4010)

---
 src/renderer/src/components/agent/AgentCombobox.tsx  | 12 ++++++++++--
 .../src/components/automations/WorkspaceCombobox.tsx | 12 ++++++++++--
 src/renderer/src/components/repo/RepoCombobox.tsx    | 12 ++++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/components/agent/AgentCombobox.tsx b/src/renderer/src/components/agent/AgentCombobox.tsx
index 2ae12dfa5..93e12313d 100644
--- a/src/renderer/src/components/agent/AgentCombobox.tsx
+++ b/src/renderer/src/components/agent/AgentCombobox.tsx
@@ -146,7 +146,15 @@ export default function AgentCombobox({
     }
   }, [])
 
-  React.useEffect(() => cancelFocusFrame, [cancelFocusFrame])
+  const setInputNode = useCallback(
+    (node: HTMLInputElement | null): void => {
+      if (node === null) {
+        cancelFocusFrame()
+      }
+      inputRef.current = node
+    },
+    [cancelFocusFrame]
+  )
 
   React.useEffect(() => {
     if (!open) {
@@ -284,7 +292,7 @@ export default function AgentCombobox({
         >
           <Command shouldFilter={false} value={commandValue} onValueChange={setCommandValue}>
             <CommandInput
-              ref={inputRef}
+              ref={setInputNode}
               placeholder="Search agents..."
               value={query}
               onValueChange={setQuery}
diff --git a/src/renderer/src/components/automations/WorkspaceCombobox.tsx b/src/renderer/src/components/automations/WorkspaceCombobox.tsx
index 2b501789c..9d85ff5b8 100644
--- a/src/renderer/src/components/automations/WorkspaceCombobox.tsx
+++ b/src/renderer/src/components/automations/WorkspaceCombobox.tsx
@@ -35,7 +35,15 @@ export function WorkspaceCombobox({
     }
   }, [])
 
-  React.useEffect(() => cancelFocusFrame, [cancelFocusFrame])
+  const setInputNode = React.useCallback(
+    (node: HTMLInputElement | null): void => {
+      if (node === null) {
+        cancelFocusFrame()
+      }
+      inputRef.current = node
+    },
+    [cancelFocusFrame]
+  )
 
   const focusSearchInput = React.useCallback(() => {
     cancelFocusFrame()
@@ -80,7 +88,7 @@ export function WorkspaceCombobox({
         }}
       >
         <Command>
-          <CommandInput ref={inputRef} placeholder="Search workspaces..." />
+          <CommandInput ref={setInputNode} placeholder="Search workspaces..." />
           <CommandList className="max-h-72">
             <CommandEmpty>No workspaces found.</CommandEmpty>
             {worktrees.map((worktree) => (
diff --git a/src/renderer/src/components/repo/RepoCombobox.tsx b/src/renderer/src/components/repo/RepoCombobox.tsx
index 70e6e043b..9df52db7c 100644
--- a/src/renderer/src/components/repo/RepoCombobox.tsx
+++ b/src/renderer/src/components/repo/RepoCombobox.tsx
@@ -65,7 +65,15 @@ export default function RepoCombobox({
     }
   }, [])
 
-  React.useEffect(() => cancelFocusFrame, [cancelFocusFrame])
+  const setInputNode = useCallback(
+    (node: HTMLInputElement | null): void => {
+      if (node === null) {
+        cancelFocusFrame()
+      }
+      inputRef.current = node
+    },
+    [cancelFocusFrame]
+  )
 
   const focusSearchInput = useCallback(() => {
     cancelFocusFrame()
@@ -215,7 +223,7 @@ export default function RepoCombobox({
         >
           <Command shouldFilter={false} value={commandValue} onValueChange={setCommandValue}>
             <CommandInput
-              ref={inputRef}
+              ref={setInputNode}
               placeholder="Search projects/folders..."
               value={query}
               onValueChange={setQuery}