diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 1b12471b96..347c83c155 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -145,7 +145,7 @@ const ChatVariableModal = ({
 
   const handleVarNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     replaceSpaceWithUnderscreInVarNameInput(e.target)
-    if (!checkVariableName(e.target.value))
+    if (!!e.target.value && !checkVariableName(e.target.value))
       return
     setName(e.target.value || '')
   }
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index 65b1171992..c35c01042e 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -44,7 +44,7 @@ const VariableModal = ({
 
   const handleVarNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     replaceSpaceWithUnderscreInVarNameInput(e.target)
-    if (!checkVariableName(e.target.value))
+    if (!!e.target.value && !checkVariableName(e.target.value))
       return
     setName(e.target.value || '')
   }