diff --git a/src/compose/ComposeBox.js b/src/compose/ComposeBox.js index 2cd5c81460e..224f5bcf5d0 100644 --- a/src/compose/ComposeBox.js +++ b/src/compose/ComposeBox.js @@ -76,8 +76,8 @@ export const updateTextInput = (textInput: TextInput, text: string): void => { if (text) { textInput.setNativeProps({ text }); - } else { - textInput.clear(); + } else if (text.length === 0) { + textInput.setNativeProps({ text: '\u200B' }); if (TextInputReset) { TextInputReset.resetKeyboardInput(findNodeHandle(textInput)); } @@ -106,6 +106,17 @@ class ComposeBox extends PureComponent { selection: { start: 0, end: 0 }, }; + setInputs = (message: ?string, topic: ?string) => { + if (message !== null) { + updateTextInput(this.messageInput, message); + this.handleMessageChange(message); + } + if (topic !== null) { + updateTextInput(this.topicInput, topic); + this.handleTopicChange(topic); + } + }; + handleComposeMenuToggle = () => { this.setState(({ isMenuExpanded }) => ({ isMenuExpanded: !isMenuExpanded, @@ -122,9 +133,8 @@ class ComposeBox extends PureComponent { this.setState({ topic, isMenuExpanded: false }); }; - handleTopicAutocomplete = (message: string) => { - this.handleTopicChange(message); - updateTextInput(this.topicInput, message); + handleTopicAutocomplete = (topic: string) => { + this.setInputs(null, topic); }; handleMessageChange = (message: string) => { @@ -134,8 +144,7 @@ class ComposeBox extends PureComponent { }; handleMessageAutocomplete = (message: string) => { - this.handleMessageChange(message); - updateTextInput(this.messageInput, message); + this.setInputs(message, null); }; handleMessageSelectionChange = (event: Object) => { @@ -144,12 +153,15 @@ class ComposeBox extends PureComponent { }; handleMessageFocus = () => { + const { topic } = this.state; const { lastMessageTopic } = this.props; - this.setState(({ topic }) => ({ + this.setState({ isMessageFocused: true, isMenuExpanded: false, - topic: topic || lastMessageTopic, - })); + }); + setTimeout(() => { + this.setInputs(null, topic || lastMessageTopic); + }, 200); }; handleMessageBlur = () => { @@ -193,6 +205,7 @@ class ComposeBox extends PureComponent { dispatch(addToOutbox(destinationNarrow, message)); dispatch(draftRemove(narrow)); + this.setInputs('', ''); }; handleEdit = () => { @@ -227,22 +240,27 @@ class ComposeBox extends PureComponent { this.tryUpdateDraft(); } + componentDidMount() { + const { message, topic } = this.state; + + updateTextInput(this.messageInput, message); + updateTextInput(this.topicInput, topic); + } + componentWillReceiveProps(nextProps: Props) { if (nextProps.editMessage !== this.props.editMessage) { const topic = isStreamNarrow(nextProps.narrow) && nextProps.editMessage ? nextProps.editMessage.topic : ''; - this.setState({ - message: nextProps.editMessage ? nextProps.editMessage.content : '', - topic, - }); + const message = nextProps.editMessage ? nextProps.editMessage.content : ''; + this.setInputs(message, topic); if (this.messageInput) { this.messageInput.focus(); } } else if (!isEqual(nextProps.narrow, this.props.narrow)) { this.tryUpdateDraft(); - this.setState({ message: nextProps.draft }); + this.setInputs(nextProps.draft, null); } }