From fef90c5f1fefcd6f36148313bc8ec5c21e96bfd7 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Tue, 2 Mar 2021 00:20:34 +0800
Subject: [PATCH 1/4] fix: issue-4301

---
 src/components/TeamManagement/AutocompleteInput.jsx | 10 +++++++++-
 .../TeamManagement/AutocompleteInputContainer.jsx   | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/TeamManagement/AutocompleteInput.jsx b/src/components/TeamManagement/AutocompleteInput.jsx
index d670dfc90..fadc7370c 100644
--- a/src/components/TeamManagement/AutocompleteInput.jsx
+++ b/src/components/TeamManagement/AutocompleteInput.jsx
@@ -16,7 +16,8 @@ class AutocompleteInput extends React.Component {
     const {
       placeholder,
       selectedMembers,
-      disabled
+      disabled,
+      inputValue
     } = this.props
 
     return (
@@ -27,6 +28,7 @@ class AutocompleteInput extends React.Component {
           showDropdownIndicator={false}
           createOption
           placeholder={placeholder}
+          inputValue={inputValue}
           value={selectedMembers}
           onInputChange={this.props.onInputChange}
           onChange={this.props.onUpdate}
@@ -41,6 +43,7 @@ class AutocompleteInput extends React.Component {
 AutocompleteInput.defaultProps = {
   placeholder: 'Enter one or more user handles',
   selectedMembers: [],
+  inputValue: '',
   disabled: false
 }
 
@@ -70,6 +73,11 @@ AutocompleteInput.propTypes = {
    * The flag if component is disabled
    */
   disabled: PropTypes.bool,
+
+  /**
+   * The inputValue for the input field
+   */
+  inputValue: PropTypes.string,
 }
 
 export default AutocompleteInput
diff --git a/src/components/TeamManagement/AutocompleteInputContainer.jsx b/src/components/TeamManagement/AutocompleteInputContainer.jsx
index 8bf201179..2f8c732ee 100644
--- a/src/components/TeamManagement/AutocompleteInputContainer.jsx
+++ b/src/components/TeamManagement/AutocompleteInputContainer.jsx
@@ -11,6 +11,10 @@ class AutocompleteInputContainer extends React.Component {
   constructor(props) {
     super(props)
     this.debounceTimer = null
+    this.state = {
+      // field input value
+      inputValue: ''
+    }
 
     this.clearUserSuggestions = this.clearUserSuggestions.bind(this)
   }
@@ -27,7 +31,11 @@ class AutocompleteInputContainer extends React.Component {
     }
   }
 
-  onInputChange(inputValue) {
+  onInputChange(inputValue, reason) {
+    // for keeping inputValue
+    if (reason.action === 'input-blur' || reason.action === 'menu-close') {
+      return 
+    }
     const indexOfSpace = inputValue.indexOf(' ')
     const indexOfSemiColon = inputValue.indexOf(';')
 
@@ -36,6 +44,7 @@ class AutocompleteInputContainer extends React.Component {
       return ''
     }
 
+    this.setState({inputValue})
     if (indexOfSpace >= 1 || indexOfSemiColon >= 1 ) {
       inputValue = inputValue.substring(0, inputValue.length -1 )
       this.onUpdate([...this.props.selectedMembers, {label: inputValue, value: inputValue}])
@@ -69,9 +78,11 @@ class AutocompleteInputContainer extends React.Component {
   render() {
 
     const { placeholder, currentUser, selectedMembers, disabled } = this.props
+    const {inputValue} = this.state
 
     return (
       <AutocompleteInput
+        inputValue={inputValue}
         placeholder={placeholder ? placeholder:''}
         onInputChange={this.onInputChange.bind(this)}
         onUpdate={this.onUpdate.bind(this)}

From 04261344530fbb9130a3459e0840853196a067f9 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Thu, 4 Mar 2021 11:30:40 +0800
Subject: [PATCH 2/4] Revert "fix: issue-4301"

This reverts commit fef90c5f1fefcd6f36148313bc8ec5c21e96bfd7.
---
 src/components/TeamManagement/AutocompleteInput.jsx | 10 +---------
 .../TeamManagement/AutocompleteInputContainer.jsx   | 13 +------------
 2 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/src/components/TeamManagement/AutocompleteInput.jsx b/src/components/TeamManagement/AutocompleteInput.jsx
index fadc7370c..d670dfc90 100644
--- a/src/components/TeamManagement/AutocompleteInput.jsx
+++ b/src/components/TeamManagement/AutocompleteInput.jsx
@@ -16,8 +16,7 @@ class AutocompleteInput extends React.Component {
     const {
       placeholder,
       selectedMembers,
-      disabled,
-      inputValue
+      disabled
     } = this.props
 
     return (
@@ -28,7 +27,6 @@ class AutocompleteInput extends React.Component {
           showDropdownIndicator={false}
           createOption
           placeholder={placeholder}
-          inputValue={inputValue}
           value={selectedMembers}
           onInputChange={this.props.onInputChange}
           onChange={this.props.onUpdate}
@@ -43,7 +41,6 @@ class AutocompleteInput extends React.Component {
 AutocompleteInput.defaultProps = {
   placeholder: 'Enter one or more user handles',
   selectedMembers: [],
-  inputValue: '',
   disabled: false
 }
 
@@ -73,11 +70,6 @@ AutocompleteInput.propTypes = {
    * The flag if component is disabled
    */
   disabled: PropTypes.bool,
-
-  /**
-   * The inputValue for the input field
-   */
-  inputValue: PropTypes.string,
 }
 
 export default AutocompleteInput
diff --git a/src/components/TeamManagement/AutocompleteInputContainer.jsx b/src/components/TeamManagement/AutocompleteInputContainer.jsx
index 2f8c732ee..8bf201179 100644
--- a/src/components/TeamManagement/AutocompleteInputContainer.jsx
+++ b/src/components/TeamManagement/AutocompleteInputContainer.jsx
@@ -11,10 +11,6 @@ class AutocompleteInputContainer extends React.Component {
   constructor(props) {
     super(props)
     this.debounceTimer = null
-    this.state = {
-      // field input value
-      inputValue: ''
-    }
 
     this.clearUserSuggestions = this.clearUserSuggestions.bind(this)
   }
@@ -31,11 +27,7 @@ class AutocompleteInputContainer extends React.Component {
     }
   }
 
-  onInputChange(inputValue, reason) {
-    // for keeping inputValue
-    if (reason.action === 'input-blur' || reason.action === 'menu-close') {
-      return 
-    }
+  onInputChange(inputValue) {
     const indexOfSpace = inputValue.indexOf(' ')
     const indexOfSemiColon = inputValue.indexOf(';')
 
@@ -44,7 +36,6 @@ class AutocompleteInputContainer extends React.Component {
       return ''
     }
 
-    this.setState({inputValue})
     if (indexOfSpace >= 1 || indexOfSemiColon >= 1 ) {
       inputValue = inputValue.substring(0, inputValue.length -1 )
       this.onUpdate([...this.props.selectedMembers, {label: inputValue, value: inputValue}])
@@ -78,11 +69,9 @@ class AutocompleteInputContainer extends React.Component {
   render() {
 
     const { placeholder, currentUser, selectedMembers, disabled } = this.props
-    const {inputValue} = this.state
 
     return (
       <AutocompleteInput
-        inputValue={inputValue}
         placeholder={placeholder ? placeholder:''}
         onInputChange={this.onInputChange.bind(this)}
         onUpdate={this.onUpdate.bind(this)}

From 59fa1857240ddfcebb9df327459d7760767d6892 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Thu, 4 Mar 2021 11:38:15 +0800
Subject: [PATCH 3/4] fix: issue #4301

---
 src/components/Select/Select.jsx              |  1 +
 .../TeamManagement/AutocompleteInput.jsx      | 17 ++++++++++++++++-
 .../AutocompleteInputContainer.jsx            | 19 +++++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/components/Select/Select.jsx b/src/components/Select/Select.jsx
index 92f300a7e..daca59239 100644
--- a/src/components/Select/Select.jsx
+++ b/src/components/Select/Select.jsx
@@ -26,6 +26,7 @@ const Select = (props) => {
         {...props}
         createOptionPosition="first"
         className={containerclass}
+        ref={props.createSelectRef}
         classNamePrefix="react-select"
       />
     )
diff --git a/src/components/TeamManagement/AutocompleteInput.jsx b/src/components/TeamManagement/AutocompleteInput.jsx
index d670dfc90..006466628 100644
--- a/src/components/TeamManagement/AutocompleteInput.jsx
+++ b/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
diff --git a/src/components/TeamManagement/AutocompleteInputContainer.jsx b/src/components/TeamManagement/AutocompleteInputContainer.jsx
index 8bf201179..00cdefdc7 100644
--- a/src/components/TeamManagement/AutocompleteInputContainer.jsx
+++ b/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,29 @@ class AutocompleteInputContainer extends React.Component {
     this.clearUserSuggestions()
   }
 
+  handleInputBlur() {
+    const innerSelectInstance = this.selectInstance.select.select
+    const focusedOption = innerSelectInstance.state.focusedOption
+    // current input value
+    const inputValue =  this.selectInstance.state.inputValue
+    if (inputValue && focusedOption) {
+      innerSelectInstance.selectOption(focusedOption)
+    }
+  }
+
+  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}

From b755103c5c0912d4dbc02d37a59d83eb4a61e48d Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Thu, 4 Mar 2021 17:52:17 +0800
Subject: [PATCH 4/4] fix: issue #4301

---
 .../AutocompleteInputContainer.jsx            | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/TeamManagement/AutocompleteInputContainer.jsx b/src/components/TeamManagement/AutocompleteInputContainer.jsx
index 00cdefdc7..772f112fd 100644
--- a/src/components/TeamManagement/AutocompleteInputContainer.jsx
+++ b/src/components/TeamManagement/AutocompleteInputContainer.jsx
@@ -69,13 +69,20 @@ class AutocompleteInputContainer extends React.Component {
     this.clearUserSuggestions()
   }
 
-  handleInputBlur() {
-    const innerSelectInstance = this.selectInstance.select.select
-    const focusedOption = innerSelectInstance.state.focusedOption
-    // current input value
-    const inputValue =  this.selectInstance.state.inputValue
-    if (inputValue && focusedOption) {
-      innerSelectInstance.selectOption(focusedOption)
+  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)
+      }
     }
   }