FIX Treat value not in SingleSelectField options as blank

client/src/components/SingleSelectField/SingleSelectField.js

@@ -11,6 +11,16 @@ class SingleSelectField extends Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
+  componentDidMount() {
+    // If the value isn't in the available options, we should treat it as though it's empty.
+    // This is the same behaviour the entwine dropdown fields use.
+    if (!this.getOptions().map(option => option.value).includes(this.props.value)) {
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(null, { id: this.props.id, value: '' });
+      }
+    }
+  }
+
   /**
    * Builds the select field in readonly mode with current props
    *
@@ -34,9 +44,7 @@ class SingleSelectField extends Component {
    */
   getSelectField() {
     // .slice() to copy the array, because we could modify it with an empty item
-    const options = (this.props.source)
-      ? this.props.source.slice()
-      : [];
+    const options = this.getOptions();
 
     if (this.props.data.hasEmptyDefault && !options.find((item) => !item.value)) {
       options.unshift({
@@ -48,7 +56,7 @@ class SingleSelectField extends Component {
 
     return (
       <Input type="select" {...this.getInputProps()}>
-        { options.map((item, index) => {
+        {options.map((item, index) => {
           const key = `${this.props.name}-${item.value || `empty${index}`}`;
           const description = item.description || null;
 
@@ -57,7 +65,7 @@ class SingleSelectField extends Component {
               {item.title}
             </option>
           );
-        }) }
+        })}
       </Input>
     );
   }
@@ -85,6 +93,12 @@ class SingleSelectField extends Component {
     return props;
   }
 
+  getOptions() {
+    return (this.props.source)
+      ? this.props.source.slice()
+      : [];
+  }
+
   /**
    * Handles changes to the select field's value.
    *