Fixes #236

changelog.md

@@ -2,6 +2,11 @@
 
 ## [Unreleased]
 
+- Fixed an issue with the initialValue property of the number field. It is
+  now possible to empty the field while editting when an initialValue was set.
+  The initialValue will only be set at first render when the value is undefined
+  or when leaving the required field with an empty value. Leaving an optional
+  empty number field will not add the initialValue.
 - Added the step property to the number fields. It specifies the interval
   between legal numbers in the input field. Default is 1.
 

packages/input.number/src/NumberInput.tsx

@@ -4,6 +4,7 @@ import {IcRoundNumbers} from '@alinea/ui/icons/IcRoundNumbers'
 import {NumberField} from './NumberField'
 import css from './NumberInput.module.scss'
 import {fromModule} from '@alinea/ui'
+import {useState} from 'react'
 
 const styles = fromModule(css)
 
@@ -23,7 +24,8 @@ export function NumberInput({state, field}: NumberInputProps) {
     maxValue,
     step
   } = field.options
-  const [value = initialValue, setValue] = useInput(state)
+  const [value, setValue] = useInput(state)
+  const [defined, setDefined] = useState<boolean>(typeof value === undefined)
 
   return (
     <InputLabel
@@ -38,14 +40,25 @@ export function NumberInput({state, field}: NumberInputProps) {
       <input
         type="number"
         className={styles.root.input()}
-        value={String(value ?? '')}
-        onChange={e =>
+        value={
+          String(value ?? '') || (!defined ? String(initialValue ?? '') : '')
+        }
+        onChange={e => {
           setValue(
             e.currentTarget.value === ''
               ? undefined!
               : Number(e.currentTarget.value)
           )
-        }
+          if (!defined) setDefined(true)
+        }}
+        onBlur={e => {
+          if (
+            !optional &&
+            value === undefined &&
+            typeof initialValue !== 'undefined'
+          )
+            setValue(initialValue)
+        }}
         min={minValue}
         max={maxValue}
         step={step || 1}