fix(ui): Focus first text input by default (#4134)

* Auto-focus input boxes for modals and copilot

* Fix focus in emcn modal

* Fix integrations manager focus

* Change modal tabs to auto focus on first text input

* Auto-focus mothership task chats

---------

Co-authored-by: Theodore Li <theo@sim.ai>

Author: TheodoreSpeaks

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) => {
@@ -407,10 +410,11 @@ export function UserInput({
   }, [isSending, textareaRef])
 
   useEffect(() => {
-    if (isInitialView) {
+    const raf = window.requestAnimationFrame(() => {
       textareaRef.current?.focus()
-    }
-  }, [isInitialView, textareaRef])
+    })
+    return () => window.cancelAnimationFrame(raf)
+  }, [textareaRef])
 
   const handleContainerClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {

apps/sim/app/workspace/[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'

apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx

@@ -324,7 +324,6 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
                 }}
                 placeholder='e.g., Daily report generation'
                 className='h-9'
-                autoFocus
                 autoComplete='off'
               />
             </div>

apps/sim/app/workspace/[workspaceId]/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'

apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx

@@ -354,7 +354,6 @@ export function BYOK() {
                   }}
                   placeholder={PROVIDERS.find((p) => p.id === editingProvider)?.placeholder}
                   className='h-9 pr-9'
-                  autoFocus
                   name='byok_api_key'
                   autoComplete='off'
                   autoCorrect='off'

apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx

@@ -279,7 +279,6 @@ export function Copilot() {
                 }}
                 placeholder='e.g., Development, Production'
                 className='h-9'
-                autoFocus
               />
               {createError && (
                 <p className='text-[var(--text-error)] text-small leading-tight'>{createError}</p>

apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx

@@ -95,7 +95,6 @@ export function InboxEnableToggle() {
                 onChange={(e) => setEnableUsername(e.target.value)}
                 placeholder='e.g., acme'
                 className='h-9'
-                autoFocus
               />
               <p className='text-[var(--text-muted)] text-caption'>
                 Leave blank for an auto-generated address.

apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx

@@ -250,7 +250,6 @@ export function InboxSettingsTab() {
                   }}
                   placeholder='user@example.com'
                   className='h-9'
-                  autoFocus
                 />
               </div>
               <div className='flex flex-col gap-1'>
@@ -304,7 +303,6 @@ export function InboxSettingsTab() {
                 }}
                 placeholder='e.g., new-acme'
                 className='h-9'
-                autoFocus
               />
               {editAddressError && (
                 <p className='text-[var(--text-error)] text-small leading-tight'>

apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx

@@ -10,6 +10,7 @@ import {
   Badge,
   Button,
   Combobox,
+  focusFirstTextInputIn,
   Input,
   Label,
   Modal,
@@ -84,6 +85,15 @@ export function IntegrationsManager() {
   const [selectedDescriptionDraft, setSelectedDescriptionDraft] = useState('')
   const [selectedDisplayNameDraft, setSelectedDisplayNameDraft] = useState('')
   const [createStep, setCreateStep] = useState<1 | 2>(1)
+  const createModalContentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!showCreateModal || createStep !== 2) return
+    const id = window.setTimeout(() => {
+      focusFirstTextInputIn(createModalContentRef.current)
+    }, 0)
+    return () => window.clearTimeout(id)
+  }, [showCreateModal, createStep])
   const [serviceSearch, setServiceSearch] = useState('')
   const [copyIdSuccess, setCopyIdSuccess] = useState(false)
   const [credentialToDelete, setCredentialToDelete] = useState<WorkspaceCredential | null>(null)
@@ -769,7 +779,7 @@ export function IntegrationsManager() {
         if (!open) resetCreateForm()
       }}
     >
-      <ModalContent size='md'>
+      <ModalContent size='md' ref={createModalContentRef}>
         {createStep === 1 ? (
           <>
             <ModalHeader>Connect Integration</ModalHeader>
@@ -785,7 +795,6 @@ export function IntegrationsManager() {
                     value={serviceSearch}
                     onChange={(e) => setServiceSearch(e.target.value)}
                     className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
-                    autoFocus
                   />
                 </div>
                 <div className='flex max-h-[320px] flex-col overflow-y-auto'>
@@ -916,7 +925,6 @@ export function IntegrationsManager() {
                     autoComplete='off'
                     data-lpignore='true'
                     className='mt-1.5'
-                    autoFocus
                   />
                 </div>
                 <div>
@@ -1053,7 +1061,6 @@ export function IntegrationsManager() {
                         'min-h-[120px] resize-none border-0 font-mono text-[12px]',
                         saDragActive && 'opacity-30'
                       )}
-                      autoFocus
                     />
                   </div>
                   <div className='mt-1.5'>

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
    */