Fix focus in emcn modal

simstudioai · TheodoreSpeaks · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
commit 3630d04bd2703fab7177c4885e29746d30f3808d
diff --git a/...rkspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx b/...rkspace/[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>

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx b/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'

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/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>

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx b/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.

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx b/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'>

diff --git a/...sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx b/...sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
@@ -785,7 +785,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 +915,6 @@ export function IntegrationsManager() {
                     autoComplete='off'
                     data-lpignore='true'
                     className='mt-1.5'
-                    autoFocus
                   />
                 </div>
                 <div>
@@ -1053,7 +1051,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'>

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,7 +523,6 @@ export function McpDeploy({
           Description
         </Label>
         <Textarea
-          autoFocus
           placeholder='Describe what this tool does...'
           className='min-h-[100px] resize-none'
           value={toolDescription}

diff --git a/...w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx b/...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}
                 />

diff --git a/apps/sim/components/emcn/components/modal/auto-focus.ts b/apps/sim/components/emcn/components/modal/auto-focus.ts
@@ -26,9 +26,9 @@ 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)
+  const target = Array.from(content.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)).find(
+    isVisible
+  )
   if (!target) return
 
   event.preventDefault()

diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -138,59 +138,64 @@ export interface ModalContentProps
 const ModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
->(({ 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
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setIsInteractionReady(true), 100)
-    return () => clearTimeout(timer)
-  }, [])
-
-  return (
-    <ModalPortal>
-      <ModalOverlay />
-      <div
-        className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center'
-        style={{
-          paddingLeft: isWorkflowPage
-            ? 'calc(var(--sidebar-width) - var(--panel-width))'
-            : 'var(--sidebar-width)',
-        }}
-      >
-        <DialogPrimitive.Content
-          ref={ref}
-          className={cn(
-            'pointer-events-auto flex max-h-[84vh] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-small ring-1 ring-foreground/10',
-            ANIMATION_CLASSES,
-            'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 duration-200',
-            MODAL_SIZES[size],
-            className
-          )}
-          style={style}
-          onEscapeKeyDown={(e) => {
-            if (!isInteractionReady) {
-              e.preventDefault()
-              return
-            }
-            e.stopPropagation()
-          }}
-          onPointerDown={(e) => {
-            e.stopPropagation()
+>(
+  (
+    { 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
+
+    React.useEffect(() => {
+      const timer = setTimeout(() => setIsInteractionReady(true), 100)
+      return () => clearTimeout(timer)
+    }, [])
+
+    return (
+      <ModalPortal>
+        <ModalOverlay />
+        <div
+          className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center'
+          style={{
+            paddingLeft: isWorkflowPage
+              ? 'calc(var(--sidebar-width) - var(--panel-width))'
+              : 'var(--sidebar-width)',
           }}
-          onPointerUp={(e) => {
-            e.stopPropagation()
-          }}
-          onOpenAutoFocus={onOpenAutoFocus ?? focusFirstTextInput}
-          {...props}
         >
-          {children}
-        </DialogPrimitive.Content>
-      </div>
-    </ModalPortal>
-  )
-})
+          <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+              'pointer-events-auto flex max-h-[84vh] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-small ring-1 ring-foreground/10',
+              ANIMATION_CLASSES,
+              'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 duration-200',
+              MODAL_SIZES[size],
+              className
+            )}
+            style={style}
+            onEscapeKeyDown={(e) => {
+              if (!isInteractionReady) {
+                e.preventDefault()
+                return
+              }
+              e.stopPropagation()
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation()
+            }}
+            onPointerUp={(e) => {
+              e.stopPropagation()
+            }}
+            onOpenAutoFocus={onOpenAutoFocus ?? focusFirstTextInput}
+            {...props}
+          >
+            {children}
+          </DialogPrimitive.Content>
+        </div>
+      </ModalPortal>
+    )
+  }
+)
 
 ModalContent.displayName = 'ModalContent'