Add native module to reset TextInput to fix bad cursors in some Android keyboards (#2753)

android/app/src/main/java/com/mattermost/rnbeta/MattermostPackage.java

@@ -21,7 +21,8 @@ public class MattermostPackage implements ReactPackage {
     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
         return Arrays.<NativeModule>asList(
                 MattermostManagedModule.getInstance(reactContext),
-                NotificationPreferencesModule.getInstance(mApplication, reactContext)
+                NotificationPreferencesModule.getInstance(mApplication, reactContext),
+                new RNTextInputResetModule(reactContext)
         );
     }
 

android/app/src/main/java/com/mattermost/rnbeta/RNTextInputResetModule.java

@@ -0,0 +1,42 @@
+package com.mattermost.rnbeta;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.uimanager.UIBlock;
+import com.facebook.react.uimanager.NativeViewHierarchyManager;
+import android.content.Context;
+import android.view.View;
+import android.view.inputmethod.InputMethodManager;
+
+public class RNTextInputResetModule extends ReactContextBaseJavaModule {
+
+  private final ReactApplicationContext reactContext;
+
+  public RNTextInputResetModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return "RNTextInputReset";
+  }
+
+  // https://github.com/facebook/react-native/pull/12462#issuecomment-298812731
+  @ReactMethod
+  public void resetKeyboardInput(final int reactTagToReset) {
+      UIManagerModule uiManager = getReactApplicationContext().getNativeModule(UIManagerModule.class);
+      uiManager.addUIBlock(new UIBlock() {
+          @Override
+          public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
+              InputMethodManager imm = (InputMethodManager) getReactApplicationContext().getBaseContext().getSystemService(Context.INPUT_METHOD_SERVICE);
+              if (imm != null) {
+                  View viewToReset = nativeViewHierarchyManager.resolveView(reactTagToReset);
+                  imm.restartInput(viewToReset);
+              }
+          }
+      });
+  }
+}

app/components/autocomplete/autocomplete.js

@@ -46,6 +46,10 @@ export default class Autocomplete extends PureComponent {
         keyboardOffset: 0,
     };
 
+    onChangeText = (value) => {
+        this.props.onChangeText(value, true);
+    }
+
     handleAtMentionCountChange = (atMentionCount) => {
         this.setState({atMentionCount});
     };
@@ -133,26 +137,31 @@ export default class Autocomplete extends PureComponent {
                         maxListHeight={maxListHeight}
                         onResultCountChange={this.handleAtMentionCountChange}
                         {...this.props}
+                        onChangeText={this.onChangeText}
                     />
                     <ChannelMention
                         maxListHeight={maxListHeight}
                         onResultCountChange={this.handleChannelMentionCountChange}
                         {...this.props}
+                        onChangeText={this.onChangeText}
                     />
                     <EmojiSuggestion
                         maxListHeight={maxListHeight}
                         onResultCountChange={this.handleEmojiCountChange}
                         {...this.props}
+                        onChangeText={this.onChangeText}
                     />
                     <SlashSuggestion
                         maxListHeight={maxListHeight}
                         onResultCountChange={this.handleCommandCountChange}
                         {...this.props}
+                        onChangeText={this.onChangeText}
                     />
                     {(this.props.isSearch && this.props.enableDateSuggestion) &&
                     <DateSuggestion
                         onResultCountChange={this.handleIsDateFilterChange}
                         {...this.props}
+                        onChangeText={this.onChangeText}
                     />
                     }
                 </View>

app/components/post_textbox/post_textbox.js

@@ -3,7 +3,7 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Alert, BackHandler, Keyboard, Platform, Text, TextInput, View} from 'react-native';
+import {Alert, BackHandler, findNodeHandle, Keyboard, NativeModules, Platform, Text, TextInput, View} from 'react-native';
 import {intlShape} from 'react-intl';
 import Button from 'react-native-button';
 import {General, RequestStatus} from 'mattermost-redux/constants';
@@ -24,6 +24,8 @@ import SendButton from 'app/components/send_button';
 
 import Typing from './components/typing';
 
+const {RNTextInputReset} = NativeModules;
+
 const AUTOCOMPLETE_MARGIN = 20;
 const AUTOCOMPLETE_MAX_HEIGHT = 200;
 
@@ -273,13 +275,18 @@ export default class PostTextbox extends PureComponent {
         });
     }
 
-    handleTextChange = (value) => {
+    handleTextChange = (value, autocomplete = false) => {
         const {
             actions,
             channelId,
             rootId,
         } = this.props;
 
+        // Workaround for some Android keyboards that don't play well with cursors (e.g. Samsung keyboards)
+        if (autocomplete && Platform.OS === 'android') {
+            RNTextInputReset.resetKeyboardInput(findNodeHandle(this.refs.input));
+        }
+
         this.checkMessageLength(value);
         this.setState({value});