TextInput OnChangeText is not called when the value is changed programmatically

[williamliangwl]

• [ x ] Review the documentation: https://facebook.github.io/react-native
• [ x ] Search for existing issues: https://github.com/facebook/react-native/issues
• [ x ] Use the latest React Native version: https://github.com/facebook/react-native/releases
• [ x ] Run react-native info in your terminal and paste its contents under "Environment"
• [ x ] Let us know how to reproduce the issue. Include a code sample, share a project, or
  share an app that reproduces the issue using https://snack.expo.io/

Environment

OS: Windows 10
Node: 6.11.5
Yarn: 1.3.2
npm: 4.6.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

Description

When a TextInput's value props is following a state/other prop's value, and when the state/other prop's value changed programmatically, the OnChangeText is not called.

However, editing the TextInput through keyboard will still trigger the OnChangeText.

Steps to Reproduce

1. Run react-native init newproject
2. Open the App.js file
3. You may use the following simple code to reproduce the issue. In short, there exists a text state whose value is linked to a TextInput. After 3 seconds, the text state will be updated to a certain value, to check if the OnChangeText will be called.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

type Props = {};
export default class App extends Component<Props> {

  constructor(props) {
    super(props);

    this.state = {
      text: ''
    };

    this.handleTextChanged = this.handleTextChanged.bind(this);
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ text: 'timeout' });
    }, 3000);
  }

  handleTextChanged(text) {
    console.warn('text changed !');
    this.setState({ text });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <TextInput
          onChangeText={this.handleTextChanged}
          value={this.state.text}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Expected Behavior

No matter which "source" of change to the TextInput's text, the OnChangeText event should be called.

Actual Behavior

The OnChangeText is only called when the TextInput is modified manually through keyboard input, but not programmatically.

I tested this issue in v0.53.3 as well and it has the same behavior.

This might not be a big issue ( at least for me, as my workaround is to call the handleTextChanged manually when I need it ), but if this issue can be fixed, it might help other people's business

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[elfstyle]

I have this issue too. I cant clear the text input programmatically. When I call textInputRef.clear() text input clears, but when after that I type something new in it the old text appears in front of the new text.

[elfstyle]

this trick helped me this.setState({ searchText: '' }, () => { Keyboard.dismiss() });

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.