From a261e02329b2f5cb33c40bf402087a03492b526d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 4 Jun 2022 17:23:25 -0500
Subject: [PATCH] Chats: fix search results position on main pane

---
 app/soapbox/components/account_search.tsx           | 2 ++
 app/soapbox/components/autosuggest_input.js         | 8 ++++++--
 app/soapbox/features/chats/components/chat_panes.js | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/account_search.tsx b/app/soapbox/components/account_search.tsx
index 961a4b2ef..3acda1152 100644
--- a/app/soapbox/components/account_search.tsx
+++ b/app/soapbox/components/account_search.tsx
@@ -14,6 +14,8 @@ interface IAccountSearch {
   onSelected: (accountId: string) => void,
   /** Override the default placeholder of the input. */
   placeholder?: string,
+  /** Position of results relative to the input. */
+  resultsPosition?: 'above' | 'below',
 }
 
 /** Input to search for accounts. */
diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js
index 7fd4a23ed..a252eb537 100644
--- a/app/soapbox/components/autosuggest_input.js
+++ b/app/soapbox/components/autosuggest_input.js
@@ -57,12 +57,14 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     searchTokens: PropTypes.arrayOf(PropTypes.string),
     maxLength: PropTypes.number,
     menu: PropTypes.arrayOf(PropTypes.object),
+    resultsPosition: PropTypes.string,
   };
 
   static defaultProps = {
     autoFocus: false,
     autoSelect: true,
     searchTokens: ImmutableList(['@', ':', '#']),
+    resultsPosition: 'below',
   };
 
   getFirstIndex = () => {
@@ -255,7 +257,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
   };
 
   render() {
-    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props;
+    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, resultsPosition } = this.props;
     const { suggestionsHidden } = this.state;
     const style = { direction: 'ltr' };
 
@@ -293,7 +295,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
         />
 
         <div className={classNames({
-          'absolute top-full w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
+          'absolute w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
+          'top-full': resultsPosition === 'below',
+          'bottom-full': resultsPosition === 'above',
           hidden: !visible,
           block: visible,
         })}
diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index 8aab35825..7232af6e5 100644
--- a/app/soapbox/features/chats/components/chat_panes.js
+++ b/app/soapbox/features/chats/components/chat_panes.js
@@ -102,6 +102,7 @@ class ChatPanes extends ImmutablePureComponent {
               <AccountSearch
                 placeholder={intl.formatMessage(messages.searchPlaceholder)}
                 onSelected={this.handleSuggestion}
+                resultsPosition='above'
               />
             </>
           )}