autocomplete: Show popup only when the input is focused.

Before this change, if you have an autocomplete popup visible for
the message TextInput and then move focus to the topic TextInput,
the first popup stays visible; so you can even wind up with *two*
autocompletion popups (one for message, one for topic) visible at
the same time.

Solve that the same way we do for TopicAutocomplete.

Author: gnprice

src/autocomplete/AutocompleteView.js

@@ -16,6 +16,7 @@ const prefixToComponent = {
 };
 
 type Props = {|
+  isFocused: boolean,
   text: string,
   selection: InputSelectionType,
   onAutocomplete: (input: string) => void,
@@ -29,10 +30,10 @@ export default class AutocompleteView extends PureComponent<Props> {
   };
 
   render() {
-    const { text, selection } = this.props;
+    const { isFocused, text, selection } = this.props;
     const { lastWordPrefix, filter } = getAutocompleteFilter(text, selection);
     const AutocompleteComponent = prefixToComponent[lastWordPrefix];
-    const shouldShow = !!AutocompleteComponent && filter.length > 0;
+    const shouldShow = isFocused && !!AutocompleteComponent && filter.length > 0;
 
     return (
       <AnimatedScaleComponent visible={shouldShow}>

src/compose/ComposeBox.js

@@ -333,6 +333,7 @@ class ComposeBox extends PureComponent<Props, State> {
             onAutocomplete={this.handleTopicAutocomplete}
           />
           <AutocompleteView
+            isFocused={this.state.isMessageFocused}
             selection={selection}
             text={message}
             onAutocomplete={this.handleMessageAutocomplete}