From 62406991df10d6eaa721df1b56e8df957802759b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Thu, 26 Sep 2024 16:28:20 +0800
Subject: [PATCH] fix: start node input config modal raise  'variable name is
 required' (#8793)

---
 .../configuration/config-var/config-modal/index.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 606280653..ac1d86c1a 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import ModalFoot from '../modal-foot'
@@ -40,6 +40,12 @@ const ConfigModal: FC<IConfigModalProps> = ({
   const { t } = useTranslation()
   const [tempPayload, setTempPayload] = useState<InputVar>(payload || getNewVarInWorkflow('') as any)
   const { type, label, variable, options, max_length } = tempPayload
+  const modalRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    // To fix the first input element auto focus, then directly close modal will raise error
+    if (isShow)
+      modalRef.current?.focus()
+  }, [isShow])
 
   const isStringInput = type === InputVarType.textInput || type === InputVarType.paragraph
   const checkVariableName = useCallback((value: string) => {
@@ -135,7 +141,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className='mb-8'>
+      <div className='mb-8' ref={modalRef} tabIndex={-1}>
         <div className='space-y-2'>
 
           <Field title={t('appDebug.variableConfig.fieldType')}>