Merge pull request #4323 from yoution/issue-4301

fix: issue-4301

Author: maxceem

src/components/Select/Select.jsx

@@ -26,6 +26,7 @@ const Select = (props) => {
         {...props}
         createOptionPosition="first"
         className={containerclass}
+        ref={props.createSelectRef}
         classNamePrefix="react-select"
       />
     )

src/components/TeamManagement/AutocompleteInput.jsx

@@ -16,14 +16,18 @@ class AutocompleteInput extends React.Component {
     const {
       placeholder,
       selectedMembers,
-      disabled
+      createSelectRef,
+      disabled,
+      onBlur
     } = this.props
 
     return (
       <div className="autocomplete-wrapper">
         <Select
           isMulti
+          onBlur={onBlur}
           closeMenuOnSelect
+          createSelectRef={createSelectRef}
           showDropdownIndicator={false}
           createOption
           placeholder={placeholder}
@@ -41,6 +45,7 @@ class AutocompleteInput extends React.Component {
 AutocompleteInput.defaultProps = {
   placeholder: 'Enter one or more user handles',
   selectedMembers: [],
+  createSelectRef: () => {},
   disabled: false
 }
 
@@ -50,6 +55,16 @@ AutocompleteInput.propTypes = {
    */
   onUpdate: PropTypes.func,
 
+  /**
+   * Callback fired when input blur
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Callback for pass select Ref to parent component
+   */
+  createSelectRef : PropTypes.func,
+
   /**
    * The current logged in user in the app.
    * Used to determinate "You" label and access

src/components/TeamManagement/AutocompleteInputContainer.jsx

@@ -11,8 +11,11 @@ class AutocompleteInputContainer extends React.Component {
   constructor(props) {
     super(props)
     this.debounceTimer = null
+    this.selectInstance = null
 
     this.clearUserSuggestions = this.clearUserSuggestions.bind(this)
+    this.handleInputBlur = this.handleInputBlur.bind(this)
+    this.createSelectRef = this.createSelectRef.bind(this)
   }
 
   /**
@@ -66,13 +69,36 @@ class AutocompleteInputContainer extends React.Component {
     this.clearUserSuggestions()
   }
 
+  handleInputBlur(event) {
+    const {
+      selectedMembers
+    } = this.props
+    const value = event.target.value
+    const innerSelectInstance = this.selectInstance.select
+
+    if (value) {
+      const hasExist = _.find(selectedMembers, ({label}) => label === value)
+      if (!hasExist) {
+        // format new option from input value
+        const newOption = {value, label: value}
+        innerSelectInstance.select.selectOption(newOption)
+      }
+    }
+  }
+
+  createSelectRef(ref) {
+    this.selectInstance = ref
+  }
+
   render() {
 
     const { placeholder, currentUser, selectedMembers, disabled } = this.props
 
     return (
       <AutocompleteInput
+        createSelectRef={this.createSelectRef}
         placeholder={placeholder ? placeholder:''}
+        onBlur={this.handleInputBlur}
         onInputChange={this.onInputChange.bind(this)}
         onUpdate={this.onUpdate.bind(this)}
         suggestedMembers={this.props.suggestedMembers}