From e7969987ecd5a27c869f2d00e6f4da99cb04e719 Mon Sep 17 00:00:00 2001
From: Robert Kojima <rkojima@berkeley.edu>
Date: Mon, 8 Oct 2018 13:25:49 -0700
Subject: [PATCH] Guild textarea at list positioning (#10663)

* autocomplete dialog now has ternary operator to determine placement

* added min height to textbox

* fixed spacing according to travisCI

* heightToUse function now retrieves argument from props
---
 website/client/components/chat/autoComplete.vue | 11 +++++++++--
 website/client/components/groups/chat.vue       |  5 ++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/website/client/components/chat/autoComplete.vue b/website/client/components/chat/autoComplete.vue
index dca7480ff3..8b5cc3cf43 100644
--- a/website/client/components/chat/autoComplete.vue
+++ b/website/client/components/chat/autoComplete.vue
@@ -14,7 +14,7 @@ div.autocomplete-selection(v-if='searchResults.length > 0', :style='autocomplete
 import groupBy from 'lodash/groupBy';
 
 export default {
-  props: ['selections', 'text', 'coords', 'chat'],
+  props: ['selections', 'text', 'coords', 'chat', 'textbox'],
   data () {
     return {
       currentSearch: '',
@@ -25,9 +25,15 @@ export default {
   },
   computed: {
     autocompleteStyle () {
+      function heightToUse (textBox, topCoords) {
+        let textBoxHeight = textBox['user-entry'].clientHeight;
+        return topCoords < textBoxHeight ? topCoords + 30 : textBoxHeight + 10;
+      }
       return {
-        top: `${this.coords.TOP + 30}px`,
+        top: `${heightToUse(this.textbox, this.coords.TOP)}px`,
         left: `${this.coords.LEFT + 30}px`,
+        marginLeft: '-28px',
+        marginTop: '28px',
         position: 'absolute',
         minWidth: '100px',
         minHeight: '100px',
@@ -42,6 +48,7 @@ export default {
         return option.toLowerCase().indexOf(currentSearch.toLowerCase()) !== -1;
       });
     },
+
   },
   mounted () {
     this.grabUserNames();
diff --git a/website/client/components/groups/chat.vue b/website/client/components/groups/chat.vue
index 5babe873f9..9c89526fbf 100644
--- a/website/client/components/groups/chat.vue
+++ b/website/client/components/groups/chat.vue
@@ -6,6 +6,7 @@
       .row
         textarea(:placeholder='placeholder',
                   v-model='newMessage',
+                  ref='user-entry',
                   :class='{"user-entry": newMessage}',
                   @keydown='updateCarretPosition',
                   @keyup.ctrl.enter='sendMessageShortcut()',
@@ -16,6 +17,7 @@
         autocomplete(
                 :text='newMessage',
                 v-on:select="selectedAutocomplete",
+                :textbox='textbox',
                 :coords='coords',
                 :chat='group.chat')
 
@@ -62,6 +64,7 @@
           TOP: 0,
           LEFT: 0,
         },
+        textbox: this.$refs,
       };
     },
     computed: {
@@ -187,7 +190,7 @@
     position: relative;
 
     textarea {
-      height: 150px;
+      min-height: 150px;
       width: 100%;
       background-color: $white;
       border: solid 1px $gray-400;