From 68dd2738769cf33c816554d32e8f9ec6bef0f50d Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Fri, 29 May 2026 15:42:01 -0700
Subject: [PATCH] Reduce SSH passphrase focus effect

---
 .../settings/SshPassphraseDialog.tsx          | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/components/settings/SshPassphraseDialog.tsx b/src/renderer/src/components/settings/SshPassphraseDialog.tsx
index 6044ad59945..c09910c6f4c 100644
--- a/src/renderer/src/components/settings/SshPassphraseDialog.tsx
+++ b/src/renderer/src/components/settings/SshPassphraseDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -19,6 +19,7 @@ export function SshPassphraseDialog(): React.JSX.Element | null {
   const [value, setValue] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
+  const focusFrameRef = useRef<number | null>(null)
 
   const open = request !== null
 
@@ -36,14 +37,27 @@ export function SshPassphraseDialog(): React.JSX.Element | null {
     }
   }
 
-  // DOM focus is a side effect that must remain in useEffect.
-  useEffect(() => {
-    if (!requestId) {
-      return undefined
-    }
-    const focusFrame = requestAnimationFrame(() => inputRef.current?.focus())
-    return () => cancelAnimationFrame(focusFrame)
-  }, [requestId])
+  // Why: focusing from the ref callback avoids a passive request-id Effect while
+  // still canceling stale frames when the request or mounted input changes.
+  const setInputRef = useCallback(
+    (input: HTMLInputElement | null): void => {
+      inputRef.current = input
+      if (focusFrameRef.current !== null) {
+        cancelAnimationFrame(focusFrameRef.current)
+        focusFrameRef.current = null
+      }
+      if (!input || !requestId) {
+        return
+      }
+      focusFrameRef.current = requestAnimationFrame(() => {
+        focusFrameRef.current = null
+        if (inputRef.current === input) {
+          input.focus()
+        }
+      })
+    },
+    [requestId]
+  )
 
   const handleSubmit = useCallback(async () => {
     if (!request || !value) {
@@ -107,7 +121,7 @@ export function SshPassphraseDialog(): React.JSX.Element | null {
           </label>
           <Input
             id="ssh-credential-input"
-            ref={inputRef}
+            ref={setInputRef}
             type="password"
             value={value}
             onChange={(e) => setValue(e.target.value)}