Auto-focus input boxes for modals and copilot

simstudioai · TheodoreSpeaks · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
commit 1524ec4a489640da99f7a59676aaad6e1d5fc77a
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -361,6 +361,7 @@ export function UserInput({
         } catch {
           // Invalid JSON — ignore
         }
+        textareaRef.current?.focus()
         return
       }
       const resourceJson = e.dataTransfer.getData(SIM_RESOURCE_DRAG_TYPE)
@@ -374,11 +375,13 @@ export function UserInput({
         } catch {
           // Invalid JSON — ignore
         }
+        textareaRef.current?.focus()
         return
       }
       filesRef.current.handleDrop(e)
+      requestAnimationFrame(() => textareaRef.current?.focus())
     },
-    [handleResourceSelect]
+    [handleResourceSelect, textareaRef]
   )
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {

diff --git a/...e/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx b/...e/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
@@ -94,7 +94,6 @@ export function RenameDocumentModal({
                   placeholder='Enter document name'
                   className={cn(error && 'border-[var(--text-error)]')}
                   disabled={isSubmitting}
-                  autoFocus
                   maxLength={255}
                   autoComplete='off'
                   autoCorrect='off'

diff --git a/...Id]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx b/...Id]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
@@ -168,7 +168,6 @@ export function CreateApiKeyModal({
                   }}
                   placeholder='e.g., Development, Production'
                   className='h-9'
-                  autoFocus
                   name='api_key_label'
                   autoComplete='off'
                   autoCorrect='off'

diff --git a/...flowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx b/...flowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Check, Clipboard } from 'lucide-react'
 import { useParams } from 'next/navigation'
@@ -195,8 +195,20 @@ export function A2aDeploy({
     }
   }, [startBlockId, startBlockInputFormat, missingFields, collaborativeSetSubblockValue])
 
+  const nameInputRef = useRef<HTMLInputElement>(null)
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
+
+  useEffect(() => {
+    const id = window.setTimeout(() => {
+      const el = nameInputRef.current
+      if (!el) return
+      el.focus()
+      const end = el.value.length
+      el.setSelectionRange(end, end)
+    }, 0)
+    return () => window.clearTimeout(id)
+  }, [])
   const [authScheme, setAuthScheme] = useState<AuthScheme>('apiKey')
   const [pushNotificationsEnabled, setPushNotificationsEnabled] = useState(false)
   const [skillTags, setSkillTags] = useState<string[]>([])
@@ -720,6 +732,7 @@ console.log(data);`
         </Label>
         <Input
           id='a2a-name'
+          ref={nameInputRef}
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder='Enter agent name'

diff --git a/...flowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/...flowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -523,6 +523,7 @@ export function McpDeploy({
           Description
         </Label>
         <Textarea
+          autoFocus
           placeholder='Describe what this tool does...'
           className='min-h-[100px] resize-none'
           value={toolDescription}

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -439,6 +439,17 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
     return () => window.removeEventListener('mothership-send-message', handler)
   }, [setActiveTab, copilotSendMessage])
 
+  useEffect(() => {
+    if (activeTab !== 'copilot') return
+    const id = window.setTimeout(() => {
+      const textarea = document.querySelector<HTMLTextAreaElement>(
+        "[data-tab-content='copilot'] textarea"
+      )
+      textarea?.focus()
+    }, 0)
+    return () => window.clearTimeout(id)
+  }, [activeTab])
+
   /**
    * Handles tab click events
    */

diff --git a/apps/sim/components/emcn/components/modal/auto-focus.ts b/apps/sim/components/emcn/components/modal/auto-focus.ts
@@ -0,0 +1,52 @@
+/**
+ * Default `onOpenAutoFocus` handler for emcn modals.
+ *
+ * Radix's native behavior focuses the first focusable descendant — usually the close
+ * button in `ModalHeader`. We instead focus the first visible text-entry control
+ * (input/textarea/contenteditable) inside the dialog, with the caret at the end.
+ *
+ * If no such control exists, we let Radix's default behavior run by not calling
+ * `preventDefault()`.
+ */
+
+const TEXT_INPUT_SELECTOR = [
+  'input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])' +
+    ':not([type="button"]):not([type="submit"]):not([type="reset"])' +
+    ':not([disabled]):not([readonly]):not([tabindex="-1"])',
+  'textarea:not([disabled]):not([readonly]):not([tabindex="-1"])',
+  '[contenteditable="true"]:not([tabindex="-1"])',
+  '[contenteditable=""]:not([tabindex="-1"])',
+].join(',')
+
+function isVisible(el: HTMLElement): boolean {
+  return el.offsetParent !== null || el.getClientRects().length > 0
+}
+
+export function focusFirstTextInput(event: Event): void {
+  const content = event.currentTarget as HTMLElement | null
+  if (!content) return
+
+  const target = Array.from(
+    content.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)
+  ).find(isVisible)
+  if (!target) return
+
+  event.preventDefault()
+  target.focus({ preventScroll: false })
+
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+    const end = target.value.length
+    try {
+      target.setSelectionRange(end, end)
+    } catch {
+      // Some input types (number, email, etc.) reject setSelectionRange — ignore.
+    }
+  } else if (target.isContentEditable) {
+    const range = document.createRange()
+    range.selectNodeContents(target)
+    range.collapse(false)
+    const sel = window.getSelection()
+    sel?.removeAllRanges()
+    sel?.addRange(range)
+  }
+}
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -43,6 +43,7 @@ import { X } from 'lucide-react'
 import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
+import { focusFirstTextInput } from './auto-focus'
 
 /**
  * Shared animation classes for modal transitions.
@@ -137,7 +138,7 @@ export interface ModalContentProps
 const ModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
->(({ className, children, showClose = true, size = 'md', style, ...props }, ref) => {
+>(({ className, children, showClose = true, size = 'md', style, onOpenAutoFocus, ...props }, ref) => {
   const [isInteractionReady, setIsInteractionReady] = React.useState(false)
   const pathname = usePathname()
   const isWorkflowPage = pathname?.includes('/w/') ?? false
@@ -181,6 +182,7 @@ const ModalContent = React.forwardRef<
           onPointerUp={(e) => {
             e.stopPropagation()
           }}
+          onOpenAutoFocus={onOpenAutoFocus ?? focusFirstTextInput}
           {...props}
         >
           {children}

diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -30,6 +30,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
+import { focusFirstTextInput } from '../modal/auto-focus'
 import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal/modal'
 
 const ANIMATION_CLASSES =
@@ -59,7 +60,7 @@ const SModalClose = DialogPrimitive.Close
 const SModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
->(({ className, children, style, ...props }, ref) => {
+>(({ className, children, style, onOpenAutoFocus, ...props }, ref) => {
   const [isInteractionReady, setIsInteractionReady] = React.useState(false)
 
   React.useEffect(() => {
@@ -95,6 +96,7 @@ const SModalContent = React.forwardRef<
         onPointerUp={(e) => {
           e.stopPropagation()
         }}
+        onOpenAutoFocus={onOpenAutoFocus ?? focusFirstTextInput}
         {...props}
       >
         {children}