From 59f68cd63b01a8447bbea00d0ae8aec79eba4df8 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 17 Jul 2025 18:15:52 +0800
Subject: [PATCH] fix: ensure default values are handled correctly in
 InputNumber and related components

---
 .../base/form/components/field/number-input.tsx      |  2 +-
 .../base/form/form-scenarios/base/utils.ts           |  2 +-
 web/app/components/base/input-number/index.spec.tsx  |  6 +++---
 web/app/components/base/input-number/index.tsx       | 12 ++++++------
 .../rag-pipeline/hooks/use-input-fields.ts           |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/app/components/base/form/components/field/number-input.tsx b/web/app/components/base/form/components/field/number-input.tsx
index 13f28e97db..46d2ced8b6 100644
--- a/web/app/components/base/form/components/field/number-input.tsx
+++ b/web/app/components/base/form/components/field/number-input.tsx
@@ -18,7 +18,7 @@ const NumberInputField = ({
   className,
   ...inputProps
 }: TextFieldProps) => {
-  const field = useFieldContext<number | undefined>()
+  const field = useFieldContext<number>()
 
   return (
     <div className={cn('flex flex-col gap-y-0.5', className)}>
diff --git a/web/app/components/base/form/form-scenarios/base/utils.ts b/web/app/components/base/form/form-scenarios/base/utils.ts
index 97a10c316b..39755bcf5e 100644
--- a/web/app/components/base/form/form-scenarios/base/utils.ts
+++ b/web/app/components/base/form/form-scenarios/base/utils.ts
@@ -47,7 +47,7 @@ export const generateZodSchema = (fields: BaseConfiguration[]) => {
         zodType = (zodType as ZodString).nonempty(`${field.label} is required`)
     }
     else {
-      zodType = zodType.optional()
+      zodType = zodType.optional().nullable()
     }
 
     shape[field.variable] = zodType
diff --git a/web/app/components/base/input-number/index.spec.tsx b/web/app/components/base/input-number/index.spec.tsx
index 891cbd21e3..75d19ecb6e 100644
--- a/web/app/components/base/input-number/index.spec.tsx
+++ b/web/app/components/base/input-number/index.spec.tsx
@@ -63,11 +63,11 @@ describe('InputNumber Component', () => {
   })
 
   it('handles empty input', () => {
-    render(<InputNumber {...defaultProps} value={0} />)
+    render(<InputNumber {...defaultProps} value={1} />)
     const input = screen.getByRole('spinbutton')
 
     fireEvent.change(input, { target: { value: '' } })
-    expect(defaultProps.onChange).toHaveBeenCalledWith(undefined)
+    expect(defaultProps.onChange).toHaveBeenCalledWith(0)
   })
 
   it('handles invalid input', () => {
@@ -75,7 +75,7 @@ describe('InputNumber Component', () => {
     const input = screen.getByRole('spinbutton')
 
     fireEvent.change(input, { target: { value: 'abc' } })
-    expect(defaultProps.onChange).not.toHaveBeenCalled()
+    expect(defaultProps.onChange).toHaveBeenCalledWith(0)
   })
 
   it('displays unit when provided', () => {
diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 4282f18800..286d664d55 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -6,7 +6,7 @@ import classNames from '@/utils/classnames'
 export type InputNumberProps = {
   unit?: string
   value?: number
-  onChange: (value?: number) => void
+  onChange: (value: number) => void
   amount?: number
   size?: 'regular' | 'large'
   max?: number
@@ -46,7 +46,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     if (disabled) return
 
     if (value === undefined) {
-      onChange(defaultValue)
+      onChange(defaultValue ?? 0)
       return
     }
     const newValue = value + amount
@@ -58,7 +58,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     if (disabled) return
 
     if (value === undefined) {
-      onChange(defaultValue)
+      onChange(defaultValue ?? 0)
       return
     }
     const newValue = value - amount
@@ -69,7 +69,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
 
   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value === '') {
-      onChange(undefined)
+      onChange(0)
       return
     }
     const parsed = Number(e.target.value)
@@ -85,8 +85,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     <Input {...rest}
       // disable default controller
       type='number'
-      className={classNames('no-spinner rounded-r-none', className)}
-      value={value}
+      className={classNames('rounded-r-none', className)}
+      value={value ?? 0}
       max={max}
       min={min}
       disabled={disabled}
diff --git a/web/app/components/rag-pipeline/hooks/use-input-fields.ts b/web/app/components/rag-pipeline/hooks/use-input-fields.ts
index 0d85a43d2a..275d49a4ed 100644
--- a/web/app/components/rag-pipeline/hooks/use-input-fields.ts
+++ b/web/app/components/rag-pipeline/hooks/use-input-fields.ts
@@ -12,7 +12,7 @@ export const useInitialData = (variables: RAGPipelineVariables, lastRunInputData
       if ([BaseFieldType.textInput, BaseFieldType.paragraph, BaseFieldType.select].includes(type))
         acc[variableName] = defaultValue ?? ''
       if (type === BaseFieldType.numberInput)
-        acc[variableName] = defaultValue
+        acc[variableName] = defaultValue ?? 0
       if (type === BaseFieldType.checkbox)
         acc[variableName] = defaultValue ?? false
       if ([BaseFieldType.file, BaseFieldType.fileList].includes(type))