TextInput not adhering to the passed in value prop #18219
Description
I updated an app (iOS only) I am working on from 0.49 to 0.54. In my app I am working with currency and enforce during the onChangeText event that what is entered is valid USD. If what the user entered is not the proper format I do not update the TextInput. This was working fine as far as I remember in 0.49 but after the update to 0.54 I can enter things like 'FOO' or 112.23242, neither of which would be a valid USD currency amount. It appears that the TextInput component is no longer setting it's value to the value prop value.
Environment
Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.4
Yarn: Not Found
npm: 5.6.0
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.0 => 0.54.0
Expected Behavior
As it is a controlled component, the TextInput value would match what is passed to the value prop.
Actual Behavior
I can set the value prop to something like "HARDCODED TEXT" and if I enter new text into the TextInput it gets displayed.
Steps to Reproduce
Some sample code loosely based on the TextInput example in the docs showing the issue:
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View style={{top:100, margin: 10}}>
<Text>I would expect this to say Hello! when the user types and then never change</Text>
<TextInput
style={{height: 40, marginBottom: 10, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({val: 'Hello!'})}
placeholder="Should lock value to Hello! after first edit"
value={this.state.val}
/>
<Text>I would expect this to always say HARDCODED TEXT</Text>
<TextInput
style={{height: 40, marginBottom: 10, borderColor: 'gray', borderWidth: 1}}
value="HARDCODED TEXT"
/>
<Text>I would expect this to never have a value in it</Text>
<TextInput
style={{height: 40, marginBottom: 10, borderColor: 'gray', borderWidth: 1}}
placeholder="value prop set to a non-existent state"
value={this.state.foo}
/>
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);