diff --git a/app/components/quick_text_input.js b/app/components/quick_text_input.js index 0c82ad833..e576cb4eb 100644 --- a/app/components/quick_text_input.js +++ b/app/components/quick_text_input.js @@ -11,6 +11,10 @@ import {TextInput} from 'react-native'; // We're using this in place of a connected TextInput due to changes made in RN v0.54 // that break input in Chinese and Japanese when using a connected TextInput. See // https://github.com/facebook/react-native/issues/18403 for more information. +// +// In addition to that, there's also an ugly hack to change the key on the TextInput +// when this is triggered because that same version made setNativeProps work inconsistently. +// See https://github.com/facebook/react-native/issues/18272 for more information on that. export default class QuickTextInput extends React.PureComponent { static propTypes = { @@ -31,16 +35,37 @@ export default class QuickTextInput extends React.PureComponent { super(props); this.storedValue = props.value; + + this.state = { + key: 0, + }; } componentDidMount() { this.updateInputFromProps(); } - componentDidUpdate() { + UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase + // This will force the base TextInput to re-render if the value is changing + // from something other than the user typing in it. This does however cause + // the TextInput to flicker when this happens. + if (nextProps.value !== this.storedValue) { + this.setState({ + key: this.state.key + 1, + }); + } + + this.hadFocus = this.input.isFocused(); + } + + componentDidUpdate(prevProps, prevState) { if (this.props.value !== this.storedValue) { this.updateInputFromProps(); } + + if (prevState.key !== this.state.key && this.hadFocus) { + this.input.focus(); + } } updateInputFromProps = () => { @@ -82,6 +107,7 @@ export default class QuickTextInput extends React.PureComponent { return (