From c9a02d5c8f33ef4bc7c5684e9e653807f74337c8 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 15 Apr 2021 11:13:09 -0400
Subject: [PATCH] Fix at_mention and channel_mention autocomplete on iOS
 (#5327)

---
 .../autocomplete/at_mention/at_mention.js     | 30 +++++++++++--------
 .../channel_mention/channel_mention.js        |  3 +-
 .../autocomplete/channel_mention/index.js     |  3 +-
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js
index 583a9ffab..9355b6fe9 100644
--- a/app/components/autocomplete/at_mention/at_mention.js
+++ b/app/components/autocomplete/at_mention/at_mention.js
@@ -3,17 +3,17 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {SectionList} from 'react-native';
+import {Platform, SectionList} from 'react-native';
 
+import {AT_MENTION_REGEX, AT_MENTION_SEARCH_REGEX} from '@constants/autocomplete';
+import AtMentionItem from '@components/autocomplete/at_mention_item';
+import AutocompleteSectionHeader from '@components/autocomplete/autocomplete_section_header';
+import SpecialMentionItem from '@components/autocomplete/special_mention_item';
+import GroupMentionItem from '@components/autocomplete/at_mention_group/at_mention_group';
 import {RequestStatus} from '@mm-redux/constants';
-
-import {AT_MENTION_REGEX, AT_MENTION_SEARCH_REGEX} from 'app/constants/autocomplete';
-import AtMentionItem from 'app/components/autocomplete/at_mention_item';
-import AutocompleteSectionHeader from 'app/components/autocomplete/autocomplete_section_header';
-import SpecialMentionItem from 'app/components/autocomplete/special_mention_item';
-import GroupMentionItem from 'app/components/autocomplete/at_mention_group/at_mention_group';
-import {makeStyleSheetFromTheme} from 'app/utils/theme';
-import {t} from 'app/utils/i18n';
+import {debounce} from '@mm-redux/actions/helpers';
+import {makeStyleSheetFromTheme} from '@utils/theme';
+import {t} from '@utils/i18n';
 
 export default class AtMention extends PureComponent {
     static propTypes = {
@@ -54,9 +54,15 @@ export default class AtMention extends PureComponent {
             sections: [],
         };
     }
+
+    runSearch = debounce((currentTeamId, channelId, matchTerm) => {
+        this.props.actions.autocompleteUsers(matchTerm, currentTeamId, channelId);
+    }, 200);
+
     updateSections(sections) {
         this.setState({sections});
     }
+
     componentDidUpdate(prevProps, prevState) {
         if (this.props.matchTerm !== prevProps.matchTerm) {
             if (this.props.matchTerm === null) {
@@ -68,9 +74,9 @@ export default class AtMention extends PureComponent {
                 this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
 
                 // Update user autocomplete list with results of server request
-                const {currentTeamId, currentChannelId} = this.props;
+                const {currentTeamId, currentChannelId, matchTerm} = this.props;
                 const channelId = this.props.isSearch ? '' : currentChannelId;
-                this.props.actions.autocompleteUsers(this.props.matchTerm, currentTeamId, channelId);
+                this.runSearch(currentTeamId, channelId, matchTerm);
             }
         }
         if (this.props.matchTerm !== null && this.props.matchTerm === prevProps.matchTerm) {
@@ -255,7 +261,7 @@ export default class AtMention extends PureComponent {
                 keyExtractor={this.keyExtractor}
                 initialNumToRender={10}
                 nestedScrollEnabled={nestedScrollEnabled}
-                removeClippedSubviews={true}
+                removeClippedSubviews={Platform.OS === 'android'}
                 renderItem={this.renderItem}
                 renderSectionHeader={this.renderSectionHeader}
                 style={[style.listView, {maxHeight: maxListHeight}]}
diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js
index b53a28af5..275f2aaea 100644
--- a/app/components/autocomplete/channel_mention/channel_mention.js
+++ b/app/components/autocomplete/channel_mention/channel_mention.js
@@ -17,7 +17,6 @@ import {t} from 'app/utils/i18n';
 export default class ChannelMention extends PureComponent {
     static propTypes = {
         actions: PropTypes.shape({
-            searchChannels: PropTypes.func.isRequired,
             autocompleteChannelsForSearch: PropTypes.func.isRequired,
         }).isRequired,
         currentTeamId: PropTypes.string.isRequired,
@@ -229,7 +228,7 @@ export default class ChannelMention extends PureComponent {
                 keyExtractor={this.keyExtractor}
                 initialNumToRender={10}
                 nestedScrollEnabled={nestedScrollEnabled}
-                removeClippedSubviews={true}
+                removeClippedSubviews={Platform.OS === 'android'}
                 renderItem={this.renderItem}
                 renderSectionHeader={this.renderSectionHeader}
                 style={[style.listView, {maxHeight: maxListHeight}]}
diff --git a/app/components/autocomplete/channel_mention/index.js b/app/components/autocomplete/channel_mention/index.js
index d792bb494..9ffc7f8bd 100644
--- a/app/components/autocomplete/channel_mention/index.js
+++ b/app/components/autocomplete/channel_mention/index.js
@@ -4,7 +4,7 @@
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 
-import {searchChannels, autocompleteChannelsForSearch} from '@mm-redux/actions/channels';
+import {autocompleteChannelsForSearch} from '@mm-redux/actions/channels';
 import {getMyChannelMemberships} from '@mm-redux/selectors/entities/channels';
 import {getTheme} from '@mm-redux/selectors/entities/preferences';
 import {getCurrentTeamId} from '@mm-redux/selectors/entities/teams';
@@ -56,7 +56,6 @@ function mapStateToProps(state, ownProps) {
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
-            searchChannels,
             autocompleteChannelsForSearch,
         }, dispatch),
     };