From df1c7d9fc14c7eb485a32fded357c56b953e2f84 Mon Sep 17 00:00:00 2001
From: enahum <nahumhbl@gmail.com>
Date: Wed, 29 Nov 2017 12:01:59 -0300
Subject: [PATCH] fix autocomplete positioning (#1228)

---
 .../autocomplete/at_mention/at_mention.js     |  3 +-
 app/components/autocomplete/autocomplete.js   | 35 ++++++++++++++-----
 .../channel_mention/channel_mention.js        |  3 +-
 app/screens/search/search.js                  | 15 ++++----
 4 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js
index 1aa29e392..44aba2a9e 100644
--- a/app/components/autocomplete/at_mention/at_mention.js
+++ b/app/components/autocomplete/at_mention/at_mention.js
@@ -234,7 +234,8 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             backgroundColor: theme.centerChannelBg
         },
         search: {
-            height: 250
+            minHeight: 125,
+            maxHeight: 250
         }
     };
 });
diff --git a/app/components/autocomplete/autocomplete.js b/app/components/autocomplete/autocomplete.js
index f99884e76..be9c8c3c3 100644
--- a/app/components/autocomplete/autocomplete.js
+++ b/app/components/autocomplete/autocomplete.js
@@ -3,7 +3,7 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {Platform, View} from 'react-native';
 
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
@@ -58,21 +58,27 @@ export default class Autocomplete extends PureComponent {
     render() {
         const style = getStyleFromTheme(this.props.theme);
 
-        const containerStyle = [style.base];
+        const wrapperStyle = [];
+        const containerStyle = [];
         if (this.props.isSearch) {
-            containerStyle.push(style.searchContainer);
+            wrapperStyle.push(style.base, style.searchContainer);
+            containerStyle.push(style.content);
         } else {
-            containerStyle.push(style.container);
+            containerStyle.push(style.base, style.container);
         }
 
         // We always need to render something, but we only draw the borders when we have results to show
         const {atMentionCount, channelMentionCount, emojiCount, commandCount} = this.state;
         if (atMentionCount + channelMentionCount + emojiCount + commandCount > 0) {
-            containerStyle.push(style.borders);
+            if (this.props.isSearch) {
+                wrapperStyle.push(style.bordersSearch);
+            } else {
+                containerStyle.push(style.borders);
+            }
         }
 
         return (
-            <View>
+            <View style={wrapperStyle}>
                 <View style={containerStyle}>
                     <AtMention
                         cursorPosition={this.state.cursorPosition}
@@ -112,15 +118,28 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             borderColor: changeOpacity(theme.centerChannelColor, 0.2),
             borderBottomWidth: 0
         },
+        bordersSearch: {
+            borderWidth: 1,
+            borderColor: changeOpacity(theme.centerChannelColor, 0.2)
+        },
         container: {
             bottom: 0,
             maxHeight: 200
         },
+        content: {
+            flex: 1
+        },
         searchContainer: {
-            elevation: 5,
             flex: 1,
             maxHeight: 250,
-            zIndex: 5
+            ...Platform.select({
+                android: {
+                    top: 46
+                },
+                ios: {
+                    top: 44
+                }
+            })
         }
     };
 });
diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js
index 0aa901397..03c2e6871 100644
--- a/app/components/autocomplete/channel_mention/channel_mention.js
+++ b/app/components/autocomplete/channel_mention/channel_mention.js
@@ -198,7 +198,8 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             backgroundColor: theme.centerChannelBg
         },
         search: {
-            height: 250
+            minHeight: 125,
+            maxHeight: 250
         }
     };
 });
diff --git a/app/screens/search/search.js b/app/screens/search/search.js
index 70c10c70c..615a5bbe8 100644
--- a/app/screens/search/search.js
+++ b/app/screens/search/search.js
@@ -642,12 +642,6 @@ class Search extends PureComponent {
                             backArrowSize={28}
                         />
                     </View>
-                    <Autocomplete
-                        ref={this.attachAutocomplete}
-                        onChangeText={this.handleTextChanged}
-                        isSearch={true}
-                        value={value}
-                    />
                     <SectionList
                         ref='list'
                         style={style.sectionList}
@@ -657,6 +651,12 @@ class Search extends PureComponent {
                         keyboardDismissMode='interactive'
                         stickySectionHeadersEnabled={Platform.OS === 'ios'}
                     />
+                    <Autocomplete
+                        ref={this.attachAutocomplete}
+                        onChangeText={this.handleTextChanged}
+                        isSearch={true}
+                        value={value}
+                    />
                     {previewComponent}
                 </View>
             </SafeAreaView>
@@ -763,8 +763,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             height: 1
         },
         sectionList: {
-            flex: 1,
-            zIndex: -1
+            flex: 1
         },
         customItem: {
             alignItems: 'center',