mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 18:08:07 +08:00
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.
This commit is contained in:
@ -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()
|
||||
|
||||
Reference in New Issue
Block a user