fix(ui): Focus first text input by default

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

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx

@@ -529,7 +529,6 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
  : 'Enter emails'
  }
  placeholderWithTags='Add email'
- autoFocus={userPerms.canAdmin}
  disabled={isSubmitting || !userPerms.canAdmin}
  fileInputOptions={fileInputOptions}
  />

apps/sim/components/emcn/components/index.ts

@@ -61,6 +61,7 @@ export { FormField, type FormFieldProps } from './form-field/form-field'
 export { Input, type InputProps, inputVariants } from './input/input'
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp/input-otp'
 export { Label } from './label/label'
+export { focusFirstTextInput, focusFirstTextInputIn } from './modal/auto-focus'
 export {
  MODAL_SIZES,
  Modal,

apps/sim/components/emcn/components/modal/auto-focus.ts

@@ -0,0 +1,58 @@
+/**
+ * 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
+}
+
+/**
+ * Focus the first visible text-entry input within `root`, placing caret at end.
+ * Returns true if an element was focused.
+ */
+export function focusFirstTextInputIn(root: HTMLElement | null): boolean {
+ if (!root) return false
+ const target = Array.from(root.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)).find(isVisible)
+ if (!target) return false
+
+ 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)
+ }
+ return true
+}
+
+export function focusFirstTextInput(event: Event): void {
+ if (focusFirstTextInputIn(event.currentTarget as HTMLElement | null)) {
+ event.preventDefault()
+ }
+}