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

@@ -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();

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;