diff --git a/website/client/components/chat/autoComplete.vue b/website/client/components/chat/autoComplete.vue index db72d2ad47..052d90ec96 100644 --- a/website/client/components/chat/autoComplete.vue +++ b/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(); diff --git a/website/client/components/groups/chat.vue b/website/client/components/groups/chat.vue index f19ceeb517..0f6b23164c 100644 --- a/website/client/components/groups/chat.vue +++ b/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,