fix: SelectMultiple should not throw errors in console

digidem · Jul 9, 2020 · f5a219d · f5a219d
1 parent 4fc9b8e
commit f5a219d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/src/ObservationDialog/Field.js b/src/ObservationDialog/Field.js
@@ -64,7 +64,13 @@ const Field = ({ field, value, onChange }: Props) => {
         />
       )
     case 'select_multiple':
-      return <SelectMultiple value={value} label={label} />
+      return <SelectMultiple
+          value={value}
+          label={label}
+          options={field.options}
+          placeholder={placeholder}
+          onChange={handleChange}
+        />
     case 'number':
       return (
         <TextField

diff --git a/src/ObservationDialog/ObservationDialog.stories.js b/src/ObservationDialog/ObservationDialog.stories.js
@@ -47,16 +47,20 @@ const getPreset = observation => {
 
 const exampleObservations = require('../../fixtures/observations.json')
 
-export const simple = () => (
-  <ObservationDialog
-    open
-    onRequestClose={action('close')}
-    onSave={action('save')}
-    observation={exampleObservations[1]}
-    getMedia={getMedia}
-    onDeleteObservation={action('delete')}
-  />
-)
+export const simple = () => {
+  const obs = exampleObservations[1]
+  return (
+    <ObservationDialog
+      open
+      getPreset={getPreset}
+      onRequestClose={action('close')}
+      onSave={action('save')}
+      observation={obs}
+      getMedia={getMedia}
+      onDeleteObservation={action('delete')}
+    />
+  )
+}
 
 export const openClose = () => {
   const [open, setOpen] = React.useState(false)

diff --git a/src/ObservationDialog/Select.js b/src/ObservationDialog/Select.js
@@ -106,7 +106,7 @@ export const SelectMultiple = ({
       id={id}
       multiple
       freeSolo
-      value={value}
+      value={value || []}
       onChange={(e, v) => onChange(v)}
       options={options.map(op => (typeof op === 'object' ? op.label : op))}
       renderInput={params =>

diff --git a/src/ObservationDialog/TextField.js b/src/ObservationDialog/TextField.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { TextField as MuiTextField } from '@material-ui/core'
 
 const TextField = ({ onChange, ...otherProps }) => {
-  const handleChange = event => onChange(event.target.value)
+  const handleChange = event => onChange && onChange(event.target.value)
   return (
     <MuiTextField
       fullWidth