Fixed displaying/resetting of selected value

scm-ui/src/containers/Autocomplete.js

@@ -21,29 +21,33 @@ type Props = {
   value?: AutocompleteObject
 };
 
-type State = {
+type State = {};
-  value: AutocompleteObject
-};
 
 class Autocomplete extends React.Component<Props, State> {
   handleInputChange = (newValue: SelectValue) => {
-    this.setState({ value: newValue.value });
     this.props.valueSelected(newValue.value);
   };
 
   render() {
     const { label, helpText, value } = this.props;
-    const stringValue = value ? value.id : "";
+    let selectValue = null;
+    if (value) {
+      selectValue = {
+        value,
+        label: value.displayName
+      };
+    }
     return (
       <div className="field">
         <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
           <AsyncSelect
             cacheOptions
-            defaultOptions
             loadOptions={this.props.loadSuggestions}
             onChange={this.handleInputChange}
-            value={stringValue}
+            value={selectValue}
+            placeholder="Start typing..." // TODO: i18n
+            noOptionsMessage={() => <>No suggestion available</>} // TODO: i18n
           />
         </div>
       </div>

scm-ui/src/groups/components/AutocompleteAddEntryToTableField.js

@@ -15,15 +15,18 @@ type Props = {
 };
 
 type State = {
-  entryToAdd: AutocompleteObject
+  entryToAdd?: AutocompleteObject
 };
 
 class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { entryToAdd: undefined };
+  }
   render() {
     const { disabled, buttonLabel, fieldLabel, helpText } = this.props;
 
     const { entryToAdd } = this.state;
-
     return (
       <div className="field">
         <Autocomplete
@@ -50,11 +53,15 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
 
   appendEntry = () => {
     const { entryToAdd } = this.state;
-    this.props.addEntry(entryToAdd.id);
+    if (!entryToAdd) {
-    this.setState({ ...this.state, entryToAdd: undefined });
+      return;
+    }
+    this.setState({ ...this.state, entryToAdd: undefined }, () =>
+      this.props.addEntry(entryToAdd.id)
+    );
   };
 
-  handleAddEntryChange = (selection: any) => {
+  handleAddEntryChange = (selection: AutocompleteObject) => {
     this.setState({
       ...this.state,
       entryToAdd: selection