Discard outdated results in modal searches (#5082)

1 files changed, 13 insertions, 3 deletions

diff --git a/webapp/components/member_list_team.jsx b/webapp/components/member_list_team.jsx
index a9db0e734..df17d7df2 100644
--- a/webapp/components/member_list_team.jsx
+++ b/webapp/components/member_list_team.jsx
@@ -23,6 +23,7 @@ export default class MemberListTeam extends React.Component {
         super(props);
 
         this.onChange = this.onChange.bind(this);
+        this.onTeamChange = this.onTeamChange.bind(this);
         this.onStatsChange = this.onStatsChange.bind(this);
         this.search = this.search.bind(this);
         this.loadComplete = this.loadComplete.bind(this);
@@ -44,7 +45,7 @@ export default class MemberListTeam extends React.Component {
     componentDidMount() {
         UserStore.addInTeamChangeListener(this.onChange);
         UserStore.addStatusesChangeListener(this.onChange);
-        TeamStore.addChangeListener(this.onChange.bind(null, true));
+        TeamStore.addChangeListener(this.onTeamChange);
         TeamStore.addStatsChangeListener(this.onStatsChange);
 
         loadProfilesAndTeamMembers(0, Constants.PROFILE_CHUNK_SIZE, TeamStore.getCurrentId(), this.loadComplete);
@@ -54,7 +55,7 @@ export default class MemberListTeam extends React.Component {
     componentWillUnmount() {
         UserStore.removeInTeamChangeListener(this.onChange);
         UserStore.removeStatusesChangeListener(this.onChange);
-        TeamStore.removeChangeListener(this.onChange);
+        TeamStore.removeChangeListener(this.onTeamChange);
         TeamStore.removeStatsChangeListener(this.onStatsChange);
     }
 
@@ -62,6 +63,10 @@ export default class MemberListTeam extends React.Component {
         this.setState({loading: false});
     }
 
+    onTeamChange() {
+        this.onChange(true);
+    }
+
     onChange(force) {
         if (this.state.search && !force) {
             return;
@@ -90,13 +95,16 @@ export default class MemberListTeam extends React.Component {
 
         clearTimeout(this.searchTimeoutId);
 
-        this.searchTimeoutId = setTimeout(
+        const searchTimeoutId = setTimeout(
             () => {
                 searchUsers(
                     term,
                     TeamStore.getCurrentId(),
                     {},
                     (users) => {
+                        if (searchTimeoutId !== this.searchTimeoutId) {
+                            return;
+                        }
                         this.setState({loading: true, search: true, users, term, teamMembers: Object.assign([], TeamStore.getMembersInTeam())});
                         loadTeamMembersForProfilesList(users, TeamStore.getCurrentId(), this.loadComplete);
                     }
@@ -104,6 +112,8 @@ export default class MemberListTeam extends React.Component {
             },
             Constants.SEARCH_TIMEOUT_MILLISECONDS
         );
+
+        this.searchTimeoutId = searchTimeoutId;
     }
 
     render() {