From 60f542ea9e5de542d6536f4d594b3d195bd47e7f Mon Sep 17 00:00:00 2001
From: Michael An <37589122+Michael18811380328@users.noreply.github.com>
Date: Thu, 10 Jan 2019 10:01:49 +0800
Subject: [PATCH] update user select (#2800)

---
 frontend/src/components/dialog/manage-members-dialog.js | 6 ++----
 frontend/src/models/user-select.js                      | 7 ++-----
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/dialog/manage-members-dialog.js b/frontend/src/components/dialog/manage-members-dialog.js
index f7dd454ea9..d6e771597e 100644
--- a/frontend/src/components/dialog/manage-members-dialog.js
+++ b/frontend/src/components/dialog/manage-members-dialog.js
@@ -23,7 +23,6 @@ class ManageMembersDialog extends React.Component {
       groupMembers: [],
       selectedOption: null,
       errMessage: [],
-      clearSelect: false,
     };
   }
 
@@ -31,7 +30,6 @@ class ManageMembersDialog extends React.Component {
     this.setState({
       selectedOption: option,
       errMessage: [],
-      clearSelect: false,
     });
   }
 
@@ -44,8 +42,8 @@ class ManageMembersDialog extends React.Component {
       this.onGroupMembersChange();
       this.setState({
         selectedOption: null,
-        clearSelect: true,
       });
+      this.refs.userSelect.clearSelect();
       if (res.data.failed.length > 0) {
         this.setState({
           errMessage: res.data.failed
@@ -84,7 +82,7 @@ class ManageMembersDialog extends React.Component {
             <UserSelect
               placeholder='Search users...'
               onSelectChange={this.onSelectChange}
-              clearSelect={this.state.clearSelect}
+              ref="userSelect"
               isMulti={true}
               className="group-transfer-select"
             />
diff --git a/frontend/src/models/user-select.js b/frontend/src/models/user-select.js
index fd5570fc29..2eb699c2cc 100644
--- a/frontend/src/models/user-select.js
+++ b/frontend/src/models/user-select.js
@@ -7,7 +7,6 @@ import { gettext } from '../utils/constants';
 const propTypes = {
   placeholder: PropTypes.string.isRequired,
   onSelectChange: PropTypes.func.isRequired,
-  clearSelect: PropTypes.bool.isRequired,
   isMulti: PropTypes.bool.isRequired,
   className: PropTypes.string.isRequired,
 };
@@ -46,10 +45,8 @@ class UserSelect extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.clearSelect === true && this.props.clearSelect === false) {
-      this.refs.userSelect.select.onChange([], { action: 'clear' });
-    }
+  clearSelect = () => {
+    this.refs.userSelect.select.onChange([], { action: 'clear' });
   }
 
   render() {