fix(chat): replace autocomplete at @

website/client/components/chat/autoComplete.vue

@@ -65,7 +65,7 @@ import tier9 from 'assets/svg/tier-staff.svg';
 import tierNPC from 'assets/svg/tier-npc.svg';
 
 export default {
-  props: ['selections', 'text', 'coords', 'chat', 'textbox'],
+  props: ['selections', 'text', 'caretPosition', 'coords', 'chat', 'textbox'],
   data () {
     return {
       atRegex: new RegExp(/@[\w-]+$/),
@@ -142,7 +142,7 @@ export default {
       if (!this.atRegex.test(newText)) return;
 
       this.searchActive = true;
-      this.currentSearchPosition = newText.length - 2;
+      this.currentSearchPosition = newText.lastIndexOf('@', this.caretPosition);
     },
     chat () {
       this.resetDefaults();

website/client/components/groups/chat.vue

@@ -19,6 +19,7 @@
                 v-on:select="selectedAutocomplete",
                 :textbox='textbox',
                 :coords='coords',
+                :caretPosition = 'caretPosition',
                 :chat='group.chat')
 
       .row.chat-actions
@@ -56,6 +57,7 @@
     data () {
       return {
         newMessage: '',
+        caretPosition: 0,
         chat: {
           submitDisable: false,
           submitTimeout: null,
@@ -75,7 +77,7 @@
     methods: {
       // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
       getCoord (e, text) {
-        let carPos = text.selectionEnd;
+        this.caretPosition = text.selectionEnd;
         let div = document.createElement('div');
         let span = document.createElement('span');
         let copyStyle = getComputedStyle(text);
@@ -86,8 +88,8 @@
 
         div.style.position = 'absolute';
         document.body.appendChild(div);
-        div.textContent = text.value.substr(0, carPos);
-        span.textContent = text.value.substr(carPos) || '.';
+        div.textContent = text.value.substr(0, this.caretPosition);
+        span.textContent = text.value.substr(this.caretPosition) || '.';
         div.appendChild(span);
         this.coords = {
           TOP: span.offsetTop,