Merge pull request #534 from appirio-tech/feature/add_team_member_autocomplete

Github issue #351 [Add a Team Member] - the existing username is displayed as autocomplete when set focus

Author: vikasrohit

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>

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

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