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.

Author: borisyankov

src/compose/ComposeBox.js

@@ -74,10 +74,9 @@ export const updateTextInput = (textInput: TextInput, text: string): void => {
     return;
   }
 
-  if (text) {
-    textInput.setNativeProps({ text });
-  } else {
-    textInput.clear();
+  textInput.setNativeProps({ text });
+
+  if (text.length === 0) {
     if (TextInputReset) {
       TextInputReset.resetKeyboardInput(findNodeHandle(textInput));
     }
@@ -106,6 +105,16 @@ class ComposeBox extends PureComponent<Props, State> {
     selection: { start: 0, end: 0 },
   };
 
+  setMessageInputValue = (message: string) => {
+    updateTextInput(this.messageInput, message);
+    this.handleMessageChange(message);
+  };
+
+  setTopicInputValue = (topic: string) => {
+    updateTextInput(this.topicInput, topic);
+    this.handleTopicChange(topic);
+  };
+
   handleComposeMenuToggle = () => {
     this.setState(({ isMenuExpanded }) => ({
       isMenuExpanded: !isMenuExpanded,
@@ -122,9 +131,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.setTopicInputValue(topic);
   };
 
   handleMessageChange = (message: string) => {
@@ -134,8 +142,7 @@ class ComposeBox extends PureComponent<Props, State> {
   };
 
   handleMessageAutocomplete = (message: string) => {
-    this.handleMessageChange(message);
-    updateTextInput(this.messageInput, message);
+    this.setMessageInputValue(message);
   };
 
   handleMessageSelectionChange = (event: Object) => {
@@ -144,12 +151,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.setTopicInputValue(topic || lastMessageTopic);
+    }, 200);
   };
 
   handleMessageBlur = () => {
@@ -193,6 +203,7 @@ class ComposeBox extends PureComponent<Props, State> {
 
     dispatch(addToOutbox(destinationNarrow, message));
     dispatch(draftRemove(narrow));
+    this.setMessageInputValue('');
   };
 
   handleEdit = () => {
@@ -227,22 +238,28 @@ 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.setMessageInputValue(message);
+      this.setTopicInputValue(topic);
       if (this.messageInput) {
         this.messageInput.focus();
       }
     } else if (!isEqual(nextProps.narrow, this.props.narrow)) {
       this.tryUpdateDraft();
-      this.setState({ message: nextProps.draft });
+      this.setMessageInputValue(nextProps.draft);
     }
   }