From 4338632a78f980c9d562d1201b92ec8939735803 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Fri, 30 Jan 2026 16:07:15 +0800
Subject: [PATCH] fix(skill): use Dialog initialFocus to focus input on modal
 open

Expose initialFocus prop on Modal component (passthrough to Headless
UI Dialog) so the create blank skill modal reliably focuses the name
input when opened, replacing the ineffective autoFocus attribute.
---
 web/app/components/base/modal/index.tsx                      | 4 +++-
 .../workflow/skill/start-tab/create-blank-skill-modal.tsx    | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 192fb7b70a..0e15613a7e 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -19,6 +19,7 @@ type IModal = {
   highPriority?: boolean // For modals that need to appear above dropdowns
   overlayOpacity?: boolean // For semi-transparent overlay instead of default
   clickOutsideNotClose?: boolean // Prevent closing when clicking outside modal
+  initialFocus?: React.RefObject<HTMLElement | null>
 }
 
 export default function Modal({
@@ -35,10 +36,11 @@ export default function Modal({
   highPriority = false,
   overlayOpacity = false,
   clickOutsideNotClose = false,
+  initialFocus,
 }: IModal) {
   return (
     <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={cn('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
+      <Dialog as="div" className={cn('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose} initialFocus={initialFocus}>
         <TransitionChild>
           <div className={cn('fixed inset-0', overlayOpacity ? 'bg-workflow-canvas-canvas-overlay' : 'bg-background-overlay', 'duration-300 ease-in data-[closed]:opacity-0', 'data-[enter]:opacity-100', 'data-[leave]:opacity-0')} />
         </TransitionChild>
diff --git a/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx b/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
index fe5e6c2556..499008e31b 100644
--- a/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
+++ b/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
@@ -46,6 +46,8 @@ const CreateBlankSkillModal = ({ isOpen, onClose }: CreateBlankSkillModalProps)
 
   const { data: existingNames } = useExistingSkillNames()
 
+  const inputRef = useRef<HTMLInputElement>(null)
+
   const trimmedName = skillName.trim()
   const isDuplicate = !!trimmedName && (existingNames?.has(trimmedName) ?? false)
   const canCreate = !!trimmedName && !isDuplicate && !isCreating
@@ -116,18 +118,19 @@ const CreateBlankSkillModal = ({ isOpen, onClose }: CreateBlankSkillModalProps)
       title={t('skill.startTab.createModal.title', { ns: 'workflow' })}
       closable={!isCreating}
       clickOutsideNotClose={isCreating}
+      initialFocus={inputRef}
     >
       <div className="mt-6 flex flex-col gap-1">
         <label className="system-sm-semibold text-text-secondary">
           {t('skill.startTab.createModal.nameLabel', { ns: 'workflow' })}
         </label>
         <Input
+          ref={inputRef}
           value={skillName}
           onChange={e => setSkillName(e.target.value)}
           placeholder={t('skill.startTab.createModal.namePlaceholder', { ns: 'workflow' }) || ''}
           destructive={isDuplicate}
           disabled={isCreating}
-          autoFocus
           onKeyDown={(e) => {
             if (e.key === 'Enter' && canCreate)
               handleCreate()