compose box: Handle every message and topic update directly

This establishes a clear one-directional flow of the data, from
secondary prop/state updates to the component via a new function `setInputs`.

The primary props of `message` and `topic` are used to track the
current value, but we never update the current input values from them.

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<Props, State> {
     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<Props, State> {
     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<Props, State> {
   };
 
   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<Props, State> {
   };
 
   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<Props, State> {
 
     dispatch(addToOutbox(destinationNarrow, message));
     dispatch(draftRemove(narrow));
+    this.setInputs('', '');
   };
 
   handleEdit = () => {
@@ -227,22 +240,27 @@ class ComposeBox extends PureComponent<Props, State> {
     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);
     }
   }