MM-12952 Avoid iOS autocorrect from overriding autocomplete values (#…

…2335) * Avoid iOS autocorrect from overriding autocomplete values * Fix double ~ for channel mentions in Android
mattermost · Nov 13, 2018 · 4eff598 · 4eff598
1 parent 0be1500
commit 4eff598
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js
@@ -3,7 +3,7 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {SectionList} from 'react-native';
+import {Platform, SectionList} from 'react-native';
 
 import {RequestStatus} from 'mattermost-redux/constants';
 import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers';
@@ -158,6 +158,10 @@ export default class ChannelMention extends PureComponent {
         if (isSearch) {
             const channelOrIn = mentionPart.includes('in:') ? 'in:' : 'channel:';
             completedDraft = mentionPart.replace(CHANNEL_MENTION_SEARCH_REGEX, `${channelOrIn} ${mention} `);
+        } else if (Platform.OS === 'ios') {
+            // We are going to set a double ~ on iOS to prevent the auto correct from taking over and replacing it
+            // with the wrong value, this is a hack but I could not found another way to solve it
+            completedDraft = mentionPart.replace(CHANNEL_MENTION_REGEX, `~~${mention} `);
         } else {
             completedDraft = mentionPart.replace(CHANNEL_MENTION_REGEX, `~${mention} `);
         }
@@ -167,6 +171,14 @@ export default class ChannelMention extends PureComponent {
         }
 
         onChangeText(completedDraft, true);
+
+        if (Platform.OS === 'ios') {
+            // This is the second part of the hack were we replace the double ~ with just one
+            // after the auto correct vanished
+            setTimeout(() => {
+                onChangeText(completedDraft.replace(`~~${mention} `, `~${mention} `));
+            });
+        }
         this.setState({mentionComplete: true});
     };
 

diff --git a/app/components/autocomplete/emoji_suggestion/emoji_suggestion.js b/app/components/autocomplete/emoji_suggestion/emoji_suggestion.js
@@ -5,6 +5,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
     FlatList,
+    Platform,
     Text,
     TouchableOpacity,
     View,
@@ -133,13 +134,28 @@ export default class EmojiSuggestion extends Component {
             actions.addReactionToLatestPost(emoji, rootId);
             onChangeText('');
         } else {
-            let completedDraft = emojiPart.replace(EMOJI_REGEX_WITHOUT_PREFIX, `:${emoji}: `);
+            // We are going to set a double : on iOS to prevent the auto correct from taking over and replacing it
+            // with the wrong value, this is a hack but I could not found another way to solve it
+            let completedDraft;
+            if (Platform.OS === 'ios') {
+                completedDraft = emojiPart.replace(EMOJI_REGEX_WITHOUT_PREFIX, `::${emoji}: `);
+            } else {
+                completedDraft = emojiPart.replace(EMOJI_REGEX_WITHOUT_PREFIX, `:${emoji}: `);
+            }
 
             if (value.length > cursorPosition) {
                 completedDraft += value.substring(cursorPosition);
             }
 
             onChangeText(completedDraft);
+
+            if (Platform.OS === 'ios') {
+                // This is the second part of the hack were we replace the double : with just one
+                // after the auto correct vanished
+                setTimeout(() => {
+                    onChangeText(completedDraft.replace(`::${emoji}: `, `:${emoji}: `));
+                });
+            }
         }
 
         this.setState({

diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion.js b/app/components/autocomplete/slash_suggestion/slash_suggestion.js
@@ -5,6 +5,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
     FlatList,
+    Platform,
 } from 'react-native';
 
 import {RequestStatus} from 'mattermost-redux/constants';
@@ -112,10 +113,23 @@ export default class SlashSuggestion extends Component {
     completeSuggestion = (command) => {
         const {onChangeText} = this.props;
 
-        const completedDraft = `/${command} `;
+        // We are going to set a double / on iOS to prevent the auto correct from taking over and replacing it
+        // with the wrong value, this is a hack but I could not found another way to solve it
+        let completedDraft = `/${command} `;
+        if (Platform.OS === 'ios') {
+            completedDraft = `//${command} `;
+        }
 
         onChangeText(completedDraft);
 
+        if (Platform.OS === 'ios') {
+            // This is the second part of the hack were we replace the double / with just one
+            // after the auto correct vanished
+            setTimeout(() => {
+                onChangeText(completedDraft.replace(`//${command} `, `/${command} `));
+            });
+        }
+
         this.setState({
             active: false,
             suggestionComplete: true,