From 1f9ad56f197896533ca8cf519fee44f0ca73504f Mon Sep 17 00:00:00 2001
From: Boris Yankov <borisyankov@gmail.com>
Date: Thu, 28 Jun 2018 03:24:34 +0200
Subject: [PATCH] compose: Make topic input uncontrolled.

Remove the `value={topic}` from topic text input, making it
an uncontrolled component.

To replicate the previous behavior:
 * initialize at the start in `componentDidMount`
 * make sure the topic input text is updated when we focus on
   the message input (it is invisible until then)
 * change the text on picking a topic autocomplete suggestion

Fixes #2589.
---
 src/compose/ComposeBox.android.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/compose/ComposeBox.android.js b/src/compose/ComposeBox.android.js
index 2eb3b66bfbe..fdea571602d 100644
--- a/src/compose/ComposeBox.android.js
+++ b/src/compose/ComposeBox.android.js
@@ -124,6 +124,11 @@ class ComposeBox extends PureComponent<Props, State> {
     this.handleMessageChange(message);
   };
 
+  setTopicInputValue = (topic: string) => {
+    updateTextInput(this.topicInput, topic);
+    this.handleTopicChange(topic);
+  };
+
   handleComposeMenuToggle = () => {
     this.setState(({ isMenuExpanded }) => ({
       isMenuExpanded: !isMenuExpanded,
@@ -140,6 +145,10 @@ class ComposeBox extends PureComponent<Props, State> {
     this.setState({ topic, isMenuExpanded: false });
   };
 
+  handleTopicAutocomplete = (topic: string) => {
+    this.setTopicInputValue(topic);
+  };
+
   handleMessageChange = (message: string) => {
     this.setState({ message, isMenuExpanded: false });
     const { dispatch, narrow } = this.props;
@@ -163,7 +172,7 @@ class ComposeBox extends PureComponent<Props, State> {
       isMenuExpanded: false,
     });
     setTimeout(() => {
-      this.handleTopicChange(topic || lastMessageTopic);
+      this.setTopicInputValue(topic || lastMessageTopic);
     }, 200); // wait, to hope the component is shown
   };
 
@@ -241,9 +250,10 @@ class ComposeBox extends PureComponent<Props, State> {
   };
 
   componentDidMount() {
-    const { message } = this.state;
+    const { message, topic } = this.state;
 
     updateTextInput(this.messageInput, message);
+    updateTextInput(this.topicInput, topic);
   }
 
   componentWillUnmount() {
@@ -258,7 +268,7 @@ class ComposeBox extends PureComponent<Props, State> {
           : '';
       const message = nextProps.editMessage ? nextProps.editMessage.content : '';
       this.setMessageInputValue(message);
-      this.handleTopicChange(topic);
+      this.setTopicInputValue(topic);
       if (this.messageInput) {
         this.messageInput.focus();
       }
@@ -303,7 +313,7 @@ class ComposeBox extends PureComponent<Props, State> {
           narrow={narrow}
           topicText={topic}
           onMessageAutocomplete={this.handleMessageAutocomplete}
-          onTopicAutocomplete={this.handleTopicChange}
+          onTopicAutocomplete={this.handleTopicAutocomplete}
         />
         <View style={styles.composeBox} onLayout={this.handleLayoutChange}>
           <View style={styles.alignBottom}>
@@ -327,7 +337,6 @@ class ComposeBox extends PureComponent<Props, State> {
                 onFocus={this.handleTopicFocus}
                 onBlur={this.handleTopicBlur}
                 onTouchStart={this.handleInputTouchStart}
-                value={topic}
               />
             )}
             <MultilineInput