Controlled TextInput broken for Chinese (and other languages) in v0.54 on iOS

[danielsuo]

Controlled TextInput breaks the Chinese pinyin keyboard's autocomplete feature. A similar issue was raised a year and a half ago (#8265) and fixed by #7496. However, it appears that others are having the same problem (#12599, #18260, #18379), but re-filing the issue with the template filled out and an example to reproduce.

Note that this works correctly in v0.53. This may have something to do with the big Text, TextInput refactor that dropped with v0.54 (Thanks, btw, @shergin and @hovox!).

I've included both a working (v0.53) and broken (v0.54) example below.

Environment

Environment:
OS: macOS High Sierra 10.13
Node: 9.3.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.54.0 => 0.54.0

Expected Behavior

Typing on a US keyboard would bring up Chinese characters corresponding to letters typed.

Actual Behavior

Each new letter typed is considered individually, instead of along with the previous untranslated characters.

Shamelessly stealing an image from @Foru who did a nice job of showing the issue:

Steps to Reproduce

Unfortunately, expo hasn't updated to the latest version of React Native. I've prepared a small project that demonstrates the issue here. There is a working version on a branch here; same project, just using RN v0.53 instead of v0.54.

[hramos]

Great bug report! Thanks for organizing all of the reports.

[magicien]

@danielsuo I created a PR #18456 to fix this issue.
I made sure that it works for Japanese, but I'm not sure about Chinese.
I forked your test app and applied this change.
Can you (or anyone who can speak Chinese) try this app to check if it's fixed?

[llr101]

if it has prop value or defaultvalue,you can't input Chinese

[magicien]

Thank you @booyeu! It might need to include #18278.
Let me update the PR.

[magicien]

I updated the pull request and the sample app.
And I tried one of Chinese keyboards. I hope it's expected behavior.

[llr101]

I changed and tried again , but it doesn't work . Do you have the prop "defaultValue" like defaultValue=this.props.value ? I found it ok that using defaultValue="test"

[magicien]

I tried 2 cases, and both of them seemed working.

<TextInput
  placeholder="Type here!"
  onChangeText={text => {
    this.setState({ text: text });
  }}
>
  <Text>{this.state.text}</Text>
</TextInput>

<TextInput
  placeholder="Type here!"
  onChangeText={text => {
    this.setState({ text: text });
  }}
  value={this.state.text}
/>

[magicien]

I tried receiving defaultValue as prop, and it also seemed working.

const TestComponent = ({ value }) => (
  <TextInput
    placeholder="Type here!"
    defaultValue={value}
  />
);

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <TestComponent value="Default Text" />
      </View>
    );
  }
}

[llr101]

Oh My fault . I appreciate your help !!! Thanks !!

[magicien]

All right. Thank you!

[danielsuo]

Works for me! Appreciate the quick fix!

[magicien]

Thank you @danielsuo!
I'm going to update the test plan of the pull request.

[Rob117]

This wasn't merged into 0.54.4 right?
Is this in 0.55.0?

[feng-zhang0712]

0.55.0 has this problem

[mpyw]

Currently the following comment provides the best solution

#18456 (comment)

[tianqiwuben]

Has this been fixed in 0.56?

[vovkasm]

@Ben5276 I will test it shortly... but probably not, because I tracked commits to master, and did not see anything that looks like fix for TextInput :-/
Update: I confused this bug with #18874, so sorry, see comment below.

[vovkasm]

I checked it, at first glance Japanese input seems to work. But I using it rarely, so can't be totally sure.
My test code is here: /~https://github.com/vovkasm/react-native-textinput-bug/tree/rn-0.56 (it is for another bug, so the application tries to filter input, but while filtering is broken, anyone can test anything :-)

[ghost]

@tsangwailam
Thank you. Here is HOC version

withHandleHandWritingTextInput.js

import React, { Component } from 'react';
import {
  Platform,
} from 'react-native';

// /~https://github.com/facebook/react-native/issues/18403
const withHandleHandWritingTextInput = (WrappedComponent) => {
  class HandleHandWritingTextInput extends React.PureComponent {
    render() {
      const { onChangeText, onBlur, ...rest } = this.props;

      return <WrappedComponent
        onChangeText={text => {
          this.tempText = text;
        }}
        onBlur={e => {
          if (onChangeText) {
            onChangeText(this.tempText);
          }
          if (onBlur) {
            onBlur(e);
          }
        }}
        {...rest}
      />;
    }
  }

  return HandleHandWritingTextInput;
}

export default withHandleHandWritingTextInput;

And in another js use by

import {withHandleHandWritingTextInput} from 'withHandleHandWritingTextInput.js';

const MyTextInput = withHandleHandWritingTextInput(TextInput);

[dogecrypto]

Not solved yet? Temporally hack code maybe not good to tackle on...

[tarouboy]

I was facing the same issue.
After different tests. It seems to be fine if TextInput with onChangeText but not setting the value props.

<TextInput onChangeText={ text => this.setState({ inputText: text }) } />

And this.state.inputText returns exactly the same as what I can see from the screen.
Any potential problems if using TextInput without setting the value props?

[vovkasm]

@kevinkevw, but most of times you need to set value. Without a value, how you would implement "reset" functionality, or set initial value?
And exactly without a value, you simple do not trigger this bug, because your TextInput now effectively uncontrolled.

[tarouboy]

@vovkasm Ah yes you're right. I got your point. But the bug itself still not yet been fixed.

Leaving it uncontrolled seems working fine in my case, I set the initial value by defaultValue props and I don't really have to reset the TextInput, maybe forcing a re-render? : /

[kk412027247]

@ tsangwailam 唔该晒！！

[kk412027247]

@tsangwailam In order to be compatible with android, I change some code.
The following code work well for me.

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


export default class App extends Component {

  state= {
    text:"", // hold the final text
    text2:"", // temporary store the input text
  };

  handleInput = (text) =>  this.setState({ text2: text });
  handleDisplay = (text) =>  this.setState({text:text});

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.text}
          placeholder={'type here'}
          onChangeText={Platform.OS ==='ios' ? this.handleInput : this.handleDisplay}
          onBlur={ Platform.OS ==='ios' ? this.handleDisplay.bind(null,this.state.text2) : null}
        />
        <Text style={styles.text}>{this.state.text}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  input:{
    width:'100%'
  },
  text: {
    textAlign: 'center',
    margin: 20,
    color:'#999'
  },
});

[mmmulani]

I just landed a fix for this on iOS. Please try it out and let me know if it doesn't work for this problem.

[Taphood]

Which official release is going to have this bug fix? In RN0.56 I'm still seeing this issue

[krizpoon]

Based on @tsangwailam 's solution, I came up with the following component. It works as a drop-in replacement (almost, except for the ref prop). It would work with external changes to the text value too.

import React, { PureComponent } from 'react';
import { TextInput, Platform } from 'react-native';
import ReactNativeVersion from 'react-native/Libraries/Core/ReactNativeVersion';

export function fixComposeInput(Component) {
    return class MyTextInput extends PureComponent {
        state = { diffKey: 0, value: '', display: '' };

        static getDerivedStateFromProps(props, state) {

            if (!state || !state.props || props.value !== state.props.value) {

                const value = props.value || '';
                const display = state && state.display || '';
                if (value !== display) {
                    const diffKey = ((state && state.diffKey) >>> 0) + 1;
                    return { props, value, display: value, diffKey };
                }
            }

            return { props };
        }

        handleChange = text => {
            // keep track of the display value
            this.setState({ display: text }, () => {
                const { onChangeText } = this.props;
                onChangeText && onChangeText(text);
            });
        };

        render() {
            const { refInput, value: valueProp, onChangeText, ...inputProps } = this.props;
            const { value, diffKey } = this.state;

            return <Component
                { ...inputProps }
                key={ `TextInput${diffKey}` }
                ref={ refInput }
                value={ value }
                onChangeText={ this.handleChange }
            />;
        }
    };
}

const rnVer = ReactNativeVersion.version.minor;

export default (Platform.OS === 'ios' && rnVer >= 54 && rnVer <= 56 ? fixComposeInput(TextInput) : TextInput);