fix: issue-4301

Author: yoution

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

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)}