From 4a4c605cd6685ae42d994a034c25c64e4a578e6b Mon Sep 17 00:00:00 2001
From: Vikas Agarwal <vikas.agarwal@topcoder.com>
Date: Wed, 9 Nov 2016 13:35:45 +0530
Subject: [PATCH] Github issue #351 [Add a Team Member] - the existing username
 is displayed as autocomplete when set focus -- Fixed. However, there is one
 edge case when: 1. user has selected some user from the dropdown 2. then user
 alters the query In this case, it would show the previous results (i.e. the
 selected member) momentarily

---
 src/components/TeamManagement/AutoCompleteInput.jsx        | 3 ++-
 src/config/constants.js                                    | 2 ++
 src/projects/detail/containers/TeamManagementContainer.jsx | 7 ++++---
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/TeamManagement/AutoCompleteInput.jsx b/src/components/TeamManagement/AutoCompleteInput.jsx
index 75b61db76..79bded728 100644
--- a/src/components/TeamManagement/AutoCompleteInput.jsx
+++ b/src/components/TeamManagement/AutoCompleteInput.jsx
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'
 import ReactDOM from 'react-dom'
 import uncontrollable from 'uncontrollable'
 import { Avatar } from 'appirio-tech-react-components'
+import { AUTOCOMPLETE_TRIGGER_LENGTH } from '../../config/constants'
 
 class AutoCompleteInput extends React.Component {
 
@@ -52,7 +53,7 @@ class AutoCompleteInput extends React.Component {
     return (
       <div className="input-icon-group tc-file-field__inputs">
 
-        {isPopupVisible && searchMembers.length > 0 &&
+        {isPopupVisible && keyword.length >= AUTOCOMPLETE_TRIGGER_LENGTH && searchMembers.length > 0 &&
           <div className="member-dropdown">
             {searchMembers.map(renderMember)}
           </div>
diff --git a/src/config/constants.js b/src/config/constants.js
index 7bfde198f..f8bc432c0 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -211,3 +211,5 @@ export const CODER_BOT_USER_FNAME = 'Coder'
 export const CODER_BOT_USER_LNAME = 'Bot'
 
 export const PROJECT_MAX_COLORS = 5
+
+export const AUTOCOMPLETE_TRIGGER_LENGTH = 3
\ No newline at end of file
diff --git a/src/projects/detail/containers/TeamManagementContainer.jsx b/src/projects/detail/containers/TeamManagementContainer.jsx
index 01cfd84d1..57383841c 100644
--- a/src/projects/detail/containers/TeamManagementContainer.jsx
+++ b/src/projects/detail/containers/TeamManagementContainer.jsx
@@ -4,7 +4,7 @@ import { withRouter } from 'react-router'
 import _ from 'lodash'
 import {
   ROLE_CONNECT_COPILOT, ROLE_CONNECT_MANAGER,
-  PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_CUSTOMER
+  PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_CUSTOMER, AUTOCOMPLETE_TRIGGER_LENGTH
 } from '../../../config/constants'
 import TeamManagement from '../../../components/TeamManagement/TeamManagement'
 import { addProjectMember, updateProjectMember, removeProjectMember,
@@ -107,7 +107,7 @@ class TeamManagementContainer extends Component {
   }
 
   onKeywordChange(keyword) {
-    if (keyword.length > 2)
+    if (keyword.length >= AUTOCOMPLETE_TRIGGER_LENGTH)
       this.props.loadMemberSuggestions(keyword)
     this.setState({ keyword, selectedNewMember: null })
   }
@@ -135,12 +135,13 @@ class TeamManagementContainer extends Component {
     )
     this.setState({
       keyword: '',
+      searchMembers: [],
       selectedNewMember: null
     })
   }
 
   onToggleAddTeamMember(isAddingTeamMember) {
-    this.setState({ isAddingTeamMember, error : null })
+    this.setState({ isAddingTeamMember, error : null, searchMembers: [] })
   }
 
   onToggleNewMemberConfirm(showNewMemberConfirmation) {