compose box: On componentWillUnmount, clear 200ms timeout on input blurs.

To avoid calling setState on an unmounted component (yellow box
warning observed at
zulip#2937 (comment)),
clear the timeouts on componentWillUnmount that get set on
handleMessageBlur and handleTopicBlur to delay the call to
this.updateIsFocused (which calls this.setState) by 200ms.

A better strategy than using setTimeout was opened as zulip#3843.

Author: Chris Bobbe

src/compose/ComposeBox.js

@@ -107,6 +107,8 @@ class ComposeBox extends PureComponent<Props, State> {
   messageInput: ?TextInput = null;
   topicInput: ?TextInput = null;
 
+  inputBlurTimeoutId: ?TimeoutID = null;
+
   static contextTypes = {
     styles: () => null,
   };
@@ -122,6 +124,11 @@ class ComposeBox extends PureComponent<Props, State> {
     selection: { start: 0, end: 0 },
   };
 
+  componentWillUnmount() {
+    clearTimeout(this.inputBlurTimeoutId);
+    this.inputBlurTimeoutId = null;
+  }
+
   updateIsFocused = () => {
     this.setState(state => ({
       ...state,
@@ -201,7 +208,9 @@ class ComposeBox extends PureComponent<Props, State> {
       isMessageFocused: false,
       isMenuExpanded: false,
     });
-    setTimeout(this.updateIsFocused, 200); // give a chance to the topic input to get the focus
+    // give a chance to the topic input to get the focus
+    clearTimeout(this.inputBlurTimeoutId);
+    this.inputBlurTimeoutId = setTimeout(this.updateIsFocused, 200);
   };
 
   handleTopicFocus = () => {
@@ -219,7 +228,9 @@ class ComposeBox extends PureComponent<Props, State> {
       isTopicFocused: false,
       isMenuExpanded: false,
     });
-    setTimeout(this.updateIsFocused, 200); // give a chance to the message input to get the focus
+    // give a chance to the message input to get the focus
+    clearTimeout(this.inputBlurTimeoutId);
+    this.inputBlurTimeoutId = setTimeout(this.updateIsFocused, 200);
   };
 
   handleInputTouchStart = () => {