fix: Fix number fields to always return number not string

src/ObservationDialog/Field.js

@@ -3,6 +3,7 @@ import React from 'react'
 import { useIntl } from 'react-intl'
 import { SelectOne, SelectMultiple } from './Select'
 import TextField from './TextField'
+import NumberField from './NumberField'
 import DateField from './DateField'
 import DateTimeField from './DateTimeField'
 
@@ -64,20 +65,21 @@ const Field = ({ field, value, onChange }: Props) => {
         />
       )
     case 'select_multiple':
-      return <SelectMultiple
+      return (
+        <SelectMultiple
           value={value}
           label={label}
           options={field.options}
           placeholder={placeholder}
           onChange={handleChange}
         />
+      )
     case 'number':
       return (
-        <TextField
+        <NumberField
           value={value}
           onChange={handleChange}
           label={label}
-          type="number"
           placeholder={placeholder}
         />
       )

src/ObservationDialog/NumberField.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { TextField as MuiTextField } from '@material-ui/core'
+
+const TextField = ({ onChange, ...otherProps }) => {
+  const handleChange = event =>
+    onChange &&
+    onChange(
+      Number.isNaN(event.target.valueAsNumber)
+        ? undefined
+        : event.target.valueAsNumber
+    )
+  return (
+    <MuiTextField
+      fullWidth
+      variant="outlined"
+      margin="normal"
+      type="number"
+      InputLabelProps={{ shrink: true }}
+      onChange={handleChange}
+      {...otherProps}
+    />
+  )
+}
+
+export default TextField

src/ObservationDialog/NumberField.stories.js

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { action } from '@storybook/addon-actions'
+
+import NumberField from './NumberField'
+
+export default {
+  title: 'ObservationDialog/NumberField'
+  // decorators: [storyFn => <div style={{ padding: '10px 0' }}>{storyFn()}</div>]
+}
+
+export const defaultStory = () => (
+  <NumberField
+    label="Age"
+    placeholder="Some placeholder (e.g. example input)"
+    helperText="The actual question might be here?"
+    onChange={v => {
+      console.log(v)
+      action('onChange')(v)
+    }}
+  />
+)
+
+defaultStory.story = {
+  name: 'default'
+}

src/ObservationDialog/ObservationDialog.stories.js

@@ -39,6 +39,11 @@ const getPreset = observation => {
         id: 'localized-field',
         key: ['localized'],
         type: 'localized'
+      },
+      {
+        id: 'number-field',
+        key: ['num'],
+        type: 'number'
       }
     ]),
     additionalFields: fields.slice(5)