Fix search issues (#973)

app/components/autocomplete/at_mention/at_mention.js

@@ -158,7 +158,7 @@ export default class AtMention extends Component {
             completedDraft += postDraft.substring(cursorPosition);
         }
 
-        onChangeText(completedDraft);
+        onChangeText(completedDraft, true);
         this.setState({
             active: false,
             mentionComplete: true
@@ -258,8 +258,8 @@ export default class AtMention extends Component {
 
     render() {
         const {autocompleteUsers, requestStatus} = this.props;
-        if (!this.state.active && (requestStatus !== RequestStatus.STARTED || requestStatus !== RequestStatus.SUCCESS)) {
-            // If we are not in an active state return null so nothing is rendered
+        if ((!this.state.active && (requestStatus !== RequestStatus.STARTED || requestStatus !== RequestStatus.SUCCESS)) || this.state.mentionComplete) {
+            // If we are not in an active state or the mention has been completed return null so nothing is rendered
             // other components are not blocked.
             return null;
         }

app/components/autocomplete/channel_mention/channel_mention.js

@@ -149,7 +149,7 @@ export default class ChannelMention extends Component {
             completedDraft += postDraft.substring(cursorPosition);
         }
 
-        onChangeText(completedDraft);
+        onChangeText(completedDraft, true);
         this.setState({
             active: false,
             mentionComplete: true,
@@ -199,8 +199,8 @@ export default class ChannelMention extends Component {
     };
 
     render() {
-        if (!this.state.active) {
-            // If we are not in an active state return null so nothing is rendered
+        if (!this.state.active || this.state.mentionComplete) {
+            // If we are not in an active state or the mention has been completed return null so nothing is rendered
             // other components are not blocked.
             return null;
         }

app/components/autocomplete/index.js

@@ -4,6 +4,7 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
+    Platform,
     StyleSheet,
     View
 } from 'react-native';
@@ -34,9 +35,10 @@ export default class Autocomplete extends PureComponent {
     };
 
     render() {
-        const container = this.props.isSearch ? style.searchContainer : style.container;
+        const searchContainer = this.props.isSearch ? style.searchContainer : null;
+        const container = this.props.isSearch ? null : style.container;
         return (
-            <View>
+            <View style={searchContainer}>
                 <View style={container}>
                     <AtMention
                         cursorPosition={this.state.cursorPosition}
@@ -70,7 +72,14 @@ const style = StyleSheet.create({
         elevation: 5,
         flex: 1,
         position: 'absolute',
-        top: 0,
+        ...Platform.select({
+            android: {
+                top: 47
+            },
+            ios: {
+                top: 64
+            }
+        }),
         left: 0,
         right: 0,
         maxHeight: 250,

app/components/search_bar/search_bar.ios.js

@@ -71,7 +71,7 @@ export default class SearchBarIos extends PureComponent {
     };
 
     onDelete = () => {
-        this.props.onChangeText('');
+        this.props.onChangeText('', true);
     };
 
     onFocus = () => {

app/screens/search/search.js

@@ -114,7 +114,7 @@ class Search extends Component {
 
     cancelSearch = () => {
         const {navigator} = this.props;
-        this.handleTextChanged('');
+        this.handleTextChanged('', true);
         navigator.dismissModal({animationType: 'slide-down'});
     };
 
@@ -162,7 +162,7 @@ class Search extends Component {
         }
     };
 
-    handleTextChanged = (value) => {
+    handleTextChanged = (value, selectionChanged) => {
         const {actions, searchingStatus} = this.props;
         this.setState({value});
         actions.handleSearchDraftChanged(value);
@@ -171,6 +171,18 @@ class Search extends Component {
             actions.clearSearch();
             this.scrollToTop();
         }
+
+        // FIXME: Workaround for iOS when setting the value directly
+        // in the inputText, bug in RN 0.48
+        if (Platform.OS === 'ios' && selectionChanged) {
+            this.handleSelectionChange({
+                nativeEvent: {
+                    selection: {
+                        end: value.length
+                    }
+                }
+            });
+        }
     };
 
     keyModifierExtractor = (item) => {
@@ -394,18 +406,35 @@ class Search extends Component {
 
     search = (terms, isOrSearch) => {
         const {actions, currentTeamId} = this.props;
-        actions.searchPosts(currentTeamId, terms, isOrSearch);
+        actions.searchPosts(currentTeamId, terms.trim(), isOrSearch);
+
+        this.handleTextChanged(`${terms} `);
+
+        // Trigger onSelectionChanged Manually when submitting
+        this.handleSelectionChange({
+            nativeEvent: {
+                selection: {
+                    end: terms.length + 1
+                }
+            }
+        });
     };
 
     setModifierValue = (modifier) => {
         const {value} = this.state;
+        let newValue = '';
+
         if (!value) {
-            this.handleTextChanged(modifier);
+            newValue = modifier;
         } else if (value.endsWith(' ')) {
-            this.handleTextChanged(`${value}${modifier}`);
+            newValue = `${value}${modifier}`;
         } else {
-            this.handleTextChanged(`${value} ${modifier}`);
+            newValue = `${value} ${modifier}`;
         }
+
+        this.handleTextChanged(newValue, true);
+
+        this.refs.searchBar.focus();
     };
 
     setRecentValue = (recent) => {
@@ -589,11 +618,6 @@ class Search extends Component {
                         backArrowSize={28}
                     />
                 </View>
-                <Autocomplete
-                    ref={this.attachAutocomplete}
-                    onChangeText={this.handleTextChanged}
-                    isSearch={true}
-                />
                 <SectionList
                     ref='list'
                     style={style.sectionList}
@@ -603,6 +627,11 @@ class Search extends Component {
                     keyboardDismissMode='interactive'
                     stickySectionHeadersEnabled={Platform.OS === 'ios'}
                 />
+                <Autocomplete
+                    ref={this.attachAutocomplete}
+                    onChangeText={this.handleTextChanged}
+                    isSearch={true}
+                />
                 {previewComponent}
             </View>
         );