Android bugfixes: TextInput issues

[bvscd]

Keyboard app on some devices does not detect programmatical change of text value in EditText view. As a result, the text value set by program and user input could be mixed in unpredictable way. The issue was seen on LG G3/G4 phones with Android v5/v6.

The fix is to notify Android Input Method Manager about change of text value inside the view using InputMethodManager.restartInput() method, accoding to guidelines:

/**
 * If the input method is currently connected to the given view,
 * restart it with its new contents.  You should call this when the text
 * within your view changes outside of the normal input method or key
 * input flow, such as when an application calls TextView.setText().
 * 
 */

Test Plan:

For validation, the chatting app was used having simple UI with input field and button that sends message and clears input field.

Without fix the process looks like following:

• Message was entered:

• Message was sent, input filed cleared, but keyboard was not synchronized and kept old suggestion

• When starting to enter next message, we get a mix of old suggestion and new input

After fix, the issue was resolved.

• Messages was entered
  

• Message was sent, input filed cleared, and keyboard suggestions were cleared as well
  

• Next message can be properly entered
  

Another bugfix was added (commit ba69387), related to wrong layouting of multiline EditText view.

Before fix it looked like below:

After fix, the problem disappeared:

Changelog:

[Android] [Fixed] - TextInput: Notify the Android Input Method Manager about a change in text value

[sondremare]

Any progress on this? It resolves a problem for me aswell.

[MattFoley]

I have also ran into this issue and would love to have it resolved.

[MattFoley]

Since this PR is stalled, you can integrate this into your own code using an @ReactMethod like this:

    @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) <getActivtyOrContext>.getSystemService(Context.INPUT_METHOD_SERVICE);
                if (imm != null) {
                    View viewToReset = nativeViewHierarchyManager.resolveView(reactTagToReset);
                    imm.restartInput(viewToReset);
                }
            }
        });
    }

Pass in the node handle of the TextInput you are modifying, one that you've fetched using findNodeHandle and a ref.

[lazyhoneyant]

@MattFoley Where I should put your @ReactMethod code? ReactTextInputManager.java ? I really want to use your code. but I don't know exact way.

[MattFoley]

Anywhere you'd like, just like any other exported native module method.

[lazyhoneyant]

@MattFoley
I’ve put your code to ReactTextInputManager.java.
But I can’t use this method in javascript Component.

I'm struggling with this issue. TextInput doesn't work properly in Korean.
InputText Keyboard duplicate previous message or character.
After sending a message, I want to reset TextInput or Keyboard buffer or whatever.
Your solution is only my hope.

import React, { Component } from 'react';
import { StyleSheet, Text, View,TextInput,TouchableOpacity } from 'react-native';

export default class Test extends Component {

  constructor(props) {
    super(props);

    this.state = {
      message:''
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSend = this.handleSend.bind(this);
  }

  handleInputChange(message) {

    this.setState({
      message: message
    })

  }

  handleSend() {

    this._textInput.resetKeyboardInput(); // undefined.

    this.setState({
      ...this.state,
      message:'',
    })

  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
          <TextInput
            ref = {component=>this._textInput = component}
            autoCapitalize = {'none'}
            autoCorrect = {false}
            autoFocus = {false}
            style={{width:100,height:30,backgroundColor:'#fff'}}
            onChangeText={(message)=>this.handleInputChange(message)}
            value = { this.state.message }
            style={{width:100,height:50}}
            />
          <Text style={{flex:1,alignItems:'center',justifyContent:'center'}} onPress={this.handleSend}>send</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF',
    marginBottom:20
  }
});

[MattFoley]

You should look up how to create native modules on Android. You don't want to put it in an existing React Native class, you want to create your own new Native module (new Java class), and use that.

…

Sent from my iPhone

On Jul 2, 2017, at 12:19 PM, lazyhoneyant ***@***.***> wrote: @MattFoley I’ve put your code to ReactTextInputManager.java. But I can’t use this method in javascript Component. I'm struggling with this issue. TextInput doesn't work properly in Korean. InputText Keyboard duplicate previous message or character. Your solution is only my hope. import React, { Component } from 'react'; import { StyleSheet, Text, View,TextInput,TouchableOpacity } from 'react-native'; export default class Test extends Component { constructor(props) { super(props); this.state = { message:'' }; this.handleInputChange = this.handleInputChange.bind(this); this.handleSend = this.handleSend.bind(this); } handleInputChange(message) { this.setState({ message: message }) } handleSend() { this._textInput.resetKeyboardInput(); // undefined. this.setState({ ...this.state, message:'', }) } render() { return ( <View style={styles.container}> <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}> <TextInput ref = {component=>this._textInput = component} autoCapitalize = {'none'} autoCorrect = {false} autoFocus = {false} style={{width:100,height:30,backgroundColor:'#fff'}} onChangeText={(message)=>this.handleInputChange(message)} value = { this.state.message } style={{width:100,height:50}} /> <Text style={{flex:1,alignItems:'center',justifyContent:'center'}} onPress={this.handleSend}>send</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFF', marginBottom:20 } }); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[lazyhoneyant]

@MattFoley ok. thank you for the reply. I will look up. :)

[MattFoley]

You then will assign your text input a ref prop like this:
<TextInput
ref={(input)=>{this.textInput=input;}} />

Then you can call your function like:

MyNativeModule.resetKeyboardInput(findNodeHandle(this.textInput));

You should be able to Google and read documentation to figure out how to apply that to your code base from there.

[lazyhoneyant]

@MattFoley You saved my life. I've finally made it. It solve my problem perfectly. thank you !!!!

[konradkierus]

Just wanted to add that the issue with the last word added to the new sentence (the first one reported by the creator of the pull request) can be also observed using native keyboard on Samsung Galaxy S7, Android 7.0.
The issue does not exist when using hardware keyboard on that phone, only using software keyboard shows the problem.
The following workaround: #12462 (comment) does the trick and fixed the issue.

[nikolaiwarner]

Thanks @MattFoley, that works great! I've packaged that up for anyone else that hits this while we're waiting on this PR.

https://www.npmjs.com/package/react-native-text-input-reset

[lucidtheory]

I was able to solve this using redux. Above solution did not work for me because using expo

Set autocorrect as a value from state:

           <TextInput
                  autoCapitalize = 'sentences'
                  style = {theme.messageInputInteriorStyle}
                  placeholder = "Message..."
                  placeholderTextColor = "grey"
                  maxLength = {1500}
                  autoCorrect = {this.state.autoCorrect} //this is where it is set to boolean
                  value = {this.state.comment.message}
                  multiline = {true}
                  onChangeText = {message => this.props.saveChatRoomComment({
                      ...this.state.comment,
                      message,
                      chat_id: this.state.chat.id,
                      user_id: this.state.user.id
                    })
                  }
                />

and then when I submit I change auto correct to false and then run another function to immediately set it back to true again which toggles the autocorrect feature on and off

[hramos]

@MattFoley thanks for reviewing this PR way back when. The original author hasn't responded, but I added your feedback a few months back. How do you feel about the state of this PR? Should we merge it, or do you have a better solution in mind?

[MattFoley]

@hramos I think this is good, but honestly, it's been ages since I've dug into this. I don't have a test handy at the moment, but I'd want to just double check that this doesn't cause a visual UI stutter when it's resetting. If you've got a device handy to test this on, and it doesn't cause a visual stutter, then go right ahead! :)

[hramos]

Thanks @MattFoley!

---

If anyone in the thread is interested in moving this forward, please verify the fix on a device and ensure there is no stutter. If you can provide a screen recording, that would be great.

[hramos]

Approved, pending verification on a device.

[hramos]

Ping, we're still waiting for verification.

[cpojer]

Could somebody verify this change on a device and post a video?

[cpojer]

Hey everyone! We have asked for a while for somebody to provide a verification for this fix as we do not have access to this device. This PR was created many years ago for older Android versions on specific devices. There exists a workaround here: npmjs.com/package/react-native-text-input-reset

We are happy to take on this change if somebody can instill confidence that this will fix the issue as well as that it doesn't have a negative effect on TextInput in other ways. As of right now, we do not have confidence and haven't been able to find anyone to champion it. Therefore, I'm going to close this issue.

[shubhamverma27]

There's a hack that you can use to fix this.

<TextInput secureTextEntry keyboardType='visible-password/>

That will prevent the Smart Typing/Predictive Text from working.

This fix works but sometimes messes up my Gboard and slows it down and have to restart the phone afterwards/ Restart Gboard by force close.
+Keyboardtype visible-password is not compatible with iOS.

[shubhamverma27]

Why is this issue closed?

[rigdern]

@shubhamverma27 cpojer commented above that the PR would be reopened and merged if somebody volunteered to verify the fix.

[HarisSpahija]

If anyone has a sample code I would like to verify the fix on ios & android API 24 to API 28

[tomasamado97]

Any news on this? I'm using https://github.com/FaridSafi/react-native-gifted-chat and I find it really hard to make it work with the package you made, @nikolaiwarner

[hnrqsss]

Any news on this? I'm using https://github.com/FaridSafi/react-native-gifted-chat and I find it really hard to make it work with the package you made, @nikolaiwarner

me too