React-native: TextInput not support Chinese input/clear() function doesn`t work in recent release of Reac-Native

Created on 9 Apr 2018  Â·  11Comments  Â·  Source: facebook/react-native

It seems like a very big problem, and not all TextInput component access to have this problem. I just found if I use defaultValue props, it will happen. This problem in react-native version 0.54.0~0.55.1, but normal in 0.53.0

TextInput Ran Commands For Stack Overflow Locked

Most helpful comment

I find a workaround for this issue.
my experience with this bug is that
(a). Chinese input goes "dissappear" and only English letters are left in the textInput
(b). prop value of textInput cause this (a)
(c). If you want to use .clear(), you have to have prop value, otherwise .clear() won't clear input field in this release.

the workaround is NOT use prop value and .clear(), instead use setNativeProps.

following is my code sample.

<TextInput
        multiline={this.props.multiline}
        onChangeText={(text) => this.onChangeText(text)}
        //value={this.props.text}
        blurOnSubmit={false}
        //{...this.props.textInputProps}
        ref={component => this._textInput = component}
        onSubmitEditing={() => {
          this.clearText()
        }}
      />

and

  clearText(){
    if (Platform.OS === 'ios') {
      this._textInput.setNativeProps({ text: ' ' });
    }

    setTimeout(() => {
      this._textInput.setNativeProps({ text: '' });
    },5);
  }

Hope it helps.

All 11 comments


Thanks for posting this! It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the No Template label. Thank you for your contributions.

How to Contribute • What to Expect from Maintainers

This issue looks like a question that would be best asked on Stack Overflow.

Stack Overflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on Stack Overflow.

Problem has been solved here #18456, the code has not been merged to newest version, so you have to modify your code manually https://github.com/facebook/react-native/pull/18456/files

i fixed the bug from @mkjfeng01. thanks.

react-native version 0.55.3 has the same problem

Same in react-native: 0.55.4.

Any updates on this issue?

@SunAnle @winglleung @johnxie Follow these file changes, and modify your code manual. I think this will solve your problem. https://github.com/facebook/react-native/pull/18456/files

I find a workaround for this issue.
my experience with this bug is that
(a). Chinese input goes "dissappear" and only English letters are left in the textInput
(b). prop value of textInput cause this (a)
(c). If you want to use .clear(), you have to have prop value, otherwise .clear() won't clear input field in this release.

the workaround is NOT use prop value and .clear(), instead use setNativeProps.

following is my code sample.

<TextInput
        multiline={this.props.multiline}
        onChangeText={(text) => this.onChangeText(text)}
        //value={this.props.text}
        blurOnSubmit={false}
        //{...this.props.textInputProps}
        ref={component => this._textInput = component}
        onSubmitEditing={() => {
          this.clearText()
        }}
      />

and

  clearText(){
    if (Platform.OS === 'ios') {
      this._textInput.setNativeProps({ text: ' ' });
    }

    setTimeout(() => {
      this._textInput.setNativeProps({ text: '' });
    },5);
  }

Hope it helps.

@leonyhenn amazing, you save my life! What is the magic behind this?

@leonyhenn you save my life 2 !

Was this page helpful?
0 / 5 - 0 ratings