fix: Select should properly respect value/label objects for options

src/ObservationDialog/ObservationDialog.stories.js

@@ -32,7 +32,7 @@ const getPreset = observation => {
       {
         id: 'multi-field',
         key: ['multi'],
-        options: ['one', 'two', 'three'],
+        options: [{label: 'one', value: 1}, {label: 'two', value: 2}, {label: 'three', value: 3}],
         type: 'select_multiple'
       },
       {
@@ -66,7 +66,7 @@ export const openClose = () => {
   const [open, setOpen] = React.useState(false)
   const obs =
     exampleObservations[Math.floor(Math.random() * exampleObservations.length)]
-  obs.tags.multi = ['one', 'two', 'three']
+  obs.tags.multi = [1, 2, 3]
   return (
     <>
       <Button onClick={() => setOpen(true)}>Open Dialog</Button>

src/ObservationDialog/Select.js

@@ -62,6 +62,19 @@ type Props = {
   options: SelectOptions
 }
 
+function Encoder (options) {
+  return {
+    toValue: (v) => {
+      var opts = options.find((ops) => ops.label === v)
+      return opts && opts.value || v
+    },
+    toLabel: (v) => {
+      var opts = options.find((ops) => ops.value === v)
+      return opts && opts.label || v
+    }
+  }
+}
+
 /**
  * A multi-select field that allows the user to enter a value that is not on the
  * list. Allows the selection of non-string values from a list, but the labels
@@ -77,11 +90,13 @@ export const SelectOne = ({
   ...props
 }: Props) => {
   const classes = useStyles()
+  const encoder = Encoder(options)
+
   return (
     <Autocomplete
       id={id}
-      value={value}
-      onChange={(e, v) => onChange(v)}
+      value={encoder.toLabel(value)}
+      onChange={(e, v) => onChange(encoder.toValue(v))}
       options={options.map(op => (typeof op === 'object' ? op.label : op))}
       renderInput={params =>
         renderInput({ ...params, classes, label, placeholder })
@@ -101,13 +116,14 @@ export const SelectMultiple = ({
   ...props
 }: Props) => {
   const classes = useStyles()
+  const encoder = Encoder(options)
   return (
     <Autocomplete
       id={id}
       multiple
       freeSolo
-      value={value || []}
-      onChange={(e, v) => onChange(v)}
+      value={(value || []).map(encoder.toLabel)}
+      onChange={(e, v) => onChange(v.map(encoder.toValue))}
       options={options.map(op => (typeof op === 'object' ? op.label : op))}
       renderInput={params =>
         renderInput({ ...params, classes, label, placeholder })

src/ObservationDialog/Select.stories.js

@@ -36,7 +36,7 @@ const countries = [
   },
   { label: 'Bonaire, Sint Eustatius and Saba' },
   { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
+  { label: 'Botswana' , value: 'botsy' },
   { label: 'Bouvet Island' },
   { label: 'Brazil' },
   { label: 'British Indian Ocean Territory' },
@@ -75,7 +75,7 @@ defaultStory.story = {
 }
 
 export const selectMultiple = () => (
-  <StateContainer initialValue={['Botswana']}>
+  <StateContainer initialValue={['botsy']}>
     {(value, setValue) => (
       <SelectMultiple
         label="Select Countries"