add prop to the autocomplete component to indicate if an automatic create action is required

scm-ui-components/packages/ui-components/src/Autocomplete.js

@@ -1,6 +1,6 @@
 // @flow
 import React from "react";
-import { AsyncCreatable } from "react-select";
+import { AsyncCreatable, Async } from "react-select";
 import type { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
 import LabelWithHelpIcon from "./forms/LabelWithHelpIcon";
 
@@ -13,7 +13,8 @@ type Props = {
   value?: SelectValue,
   placeholder: string,
   loadingMessage: string,
-  noOptionsMessage: string
+  noOptionsMessage: string,
+  creatable?: boolean
 };
 
 
@@ -42,27 +43,40 @@ class Autocomplete extends React.Component<Props, State> {
   };
 
   render() {
-    const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions } = this.props;
+    const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions, creatable } = this.props;
     return (
       <div className="field">
         <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
-          <AsyncCreatable
+          {creatable?
-            cacheOptions
+            <AsyncCreatable
-            loadOptions={loadSuggestions}
+              cacheOptions
-            onChange={this.handleInputChange}
+              loadOptions={loadSuggestions}
-            value={value}
+              onChange={this.handleInputChange}
-            placeholder={placeholder}
+              value={value}
-            loadingMessage={() => loadingMessage}
+              placeholder={placeholder}
-            noOptionsMessage={() => noOptionsMessage}
+              loadingMessage={() => loadingMessage}
-            isValidNewOption={this.isValidNewOption}
+              noOptionsMessage={() => noOptionsMessage}
-            onCreateOption={value => {
+              isValidNewOption={this.isValidNewOption}
-              this.handleInputChange({
+              onCreateOption={value => {
-                label: value,
+                this.handleInputChange({
-                value: { id: value, displayName: value }
+                  label: value,
-              });
+                  value: { id: value, displayName: value }
-            }}
+                });
-          />
+              }}
+            />
+          :
+            <Async
+              cacheOptions
+              loadOptions={loadSuggestions}
+              onChange={this.handleInputChange}
+              value={value}
+              placeholder={placeholder}
+              loadingMessage={() => loadingMessage}
+              noOptionsMessage={() => noOptionsMessage}
+            />
+
+          }
         </div>
       </div>
     );