fix: ensure default values are handled correctly in InputNumber and related components

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)}>

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

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', () => {

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}

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))