text input now handles empty values.

frontend/src/form/__tests__/useFormHandler.test.tsx

@@ -3,17 +3,26 @@ import { renderHook } from '@testing-library/react-hooks'
 import { useFormHandler } from '../useFormHandler'
 
 describe('form hook return values', () => {
-
   const values = {
     text: 'sample-text',
     number: 42,
     boolean: true,
     textArray: ['element1', 'element2'],
-    objectArray: [{ text: 'sample1', boolean: true }, { text: 'sample2', boolean: false }],
-    object: { text: 'sample', array: [12, 13], nestedObject: { text: 'nested-sample', number: 18 } }
+    objectArray: [
+      { text: 'sample1', boolean: true },
+      { text: 'sample2', boolean: false }
+    ],
+    object: {
+      text: 'sample',
+      array: [12, 13],
+      nestedObject: { text: 'nested-sample', number: 18 }
+    }
   }
 
-  const Component = () => useFormHandler(values, values => { return {} })
+  const Component = () =>
+    useFormHandler(values, values => {
+      return {}
+    })
   const { result } = renderHook(Component)
 
   it('returns correct initial states.', () => {
@@ -39,4 +48,4 @@ describe('form hook return values', () => {
   })
 })
 
-export default true
+export default true

frontend/src/form/components/TextInput.tsx

@@ -22,7 +22,7 @@ const TextInput = ({
       const newValue = {
         target: {
           type: 'custom',
-          value: parseInt(event.target.value),
+          value: parseInt(event.target.value) ?? undefined,
           name: event.target.name
         }
       }