Discard outdated results in modal searches (#5082)

6 files changed, 43 insertions, 8 deletions

diff --git a/webapp/components/admin_console/team_users.jsx b/webapp/components/admin_console/team_users.jsx
index 4517e241b..547002a5b 100644
--- a/webapp/components/admin_console/team_users.jsx
+++ b/webapp/components/admin_console/team_users.jsx
@@ -158,13 +158,17 @@ export default class UserList extends React.Component {
 
         clearTimeout(this.searchTimeoutId);
 
-        this.searchTimeoutId = setTimeout(
+        const searchTimeoutId = setTimeout(
             () => {
                 searchUsers(
                     term,
                     this.props.params.team,
                     options,
                     (users) => {
+                        if (searchTimeoutId !== this.searchTimeoutId) {
+                            return;
+                        }
+
                         this.setState({loading: true, search: true, users});
                         loadTeamMembersForProfilesList(users, this.props.params.team, this.loadComplete);
                     }
@@ -172,6 +176,8 @@ export default class UserList extends React.Component {
             },
             Constants.SEARCH_TIMEOUT_MILLISECONDS
         );
+
+        this.searchTimeoutId = searchTimeoutId;
     }
 
     render() {
diff --git a/webapp/components/channel_invite_modal.jsx b/webapp/components/channel_invite_modal.jsx
index 355d23d53..5deec0794 100644
--- a/webapp/components/channel_invite_modal.jsx
+++ b/webapp/components/channel_invite_modal.jsx
@@ -117,19 +117,25 @@ export default class ChannelInviteModal extends React.Component {
 
         clearTimeout(this.searchTimeoutId);
 
-        this.searchTimeoutId = setTimeout(
+        const searchTimeoutId = setTimeout(
             () => {
                 searchUsers(
                     term,
                     TeamStore.getCurrentId(),
                     {not_in_channel_id: this.props.channel.id},
                     (users) => {
+                        if (searchTimeoutId !== this.searchTimeoutId) {
+                            return;
+                        }
+
                         this.setState({search: true, users});
                     }
                 );
             },
             Constants.SEARCH_TIMEOUT_MILLISECONDS
         );
+
+        this.searchTimeoutId = searchTimeoutId;
     }
 
     render() {
diff --git a/webapp/components/member_list_channel.jsx b/webapp/components/member_list_channel.jsx
index 75ecd8172..6f8a266ad 100644
--- a/webapp/components/member_list_channel.jsx
+++ b/webapp/components/member_list_channel.jsx
@@ -104,13 +104,17 @@ export default class MemberListChannel 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,
@@ -125,6 +129,8 @@ export default class MemberListChannel extends React.Component {
             },
             Constants.SEARCH_TIMEOUT_MILLISECONDS
         );
+
+        this.searchTimeoutId = searchTimeoutId;
     }
 
     render() {
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() {
diff --git a/webapp/components/more_channels.jsx b/webapp/components/more_channels.jsx
index e4cff451d..d0b5f5399 100644
--- a/webapp/components/more_channels.jsx
+++ b/webapp/components/more_channels.jsx
@@ -107,17 +107,22 @@ export default class MoreChannels extends React.Component {
 
         clearTimeout(this.searchTimeoutId);
 
-        this.searchTimeoutId = setTimeout(
+        const searchTimeoutId = setTimeout(
             () => {
                 searchMoreChannels(
                     term,
                     (channels) => {
+                        if (searchTimeoutId !== this.searchTimeoutId) {
+                            return;
+                        }
                         this.setState({search: true, channels});
                     }
                 );
             },
             SEARCH_TIMEOUT_MILLISECONDS
         );
+
+        this.searchTimeoutId = searchTimeoutId;
     }
 
     render() {
@@ -196,4 +201,4 @@ export default class MoreChannels extends React.Component {
 MoreChannels.propTypes = {
     onModalDismissed: React.PropTypes.func,
     handleNewChannel: React.PropTypes.func
-};
\ No newline at end of file
+};
diff --git a/webapp/stores/team_store.jsx b/webapp/stores/team_store.jsx
index b2cb3ad26..6de47c65c 100644
--- a/webapp/stores/team_store.jsx
+++ b/webapp/stores/team_store.jsx
@@ -379,5 +379,7 @@ TeamStore.dispatchToken = AppDispatcher.register((payload) => {
     }
 });
 
+TeamStore.setMaxListeners(15);
+
 window.TeamStore = TeamStore;
 export default TeamStore;