From 9e875f40392b5ad8cbecbafa7c9b62b553c1851e Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 14 Mar 2018 10:58:40 +0200
Subject: [PATCH] Fix autocomplete handlers and keys and trigger it with tab

---
 .../src/ui/components/common/Autocomplete.vue | 56 ++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/client/src/ui/components/common/Autocomplete.vue b/client/src/ui/components/common/Autocomplete.vue
index 13aae70d..0f3815b6 100644
--- a/client/src/ui/components/common/Autocomplete.vue
+++ b/client/src/ui/components/common/Autocomplete.vue
@@ -82,6 +82,40 @@
                 return uri.replace(':id', value);
             },
             searchEmotes(e) {
+                if (this.traverse(e)) return;
+                if (e.key === 'Tab' && this.open) {
+                    const selected = this.emotes[this.selectedIndex];
+                    if (!selected) return;
+                    this.inject(selected);
+                    this.reset();
+                    return;
+                }
+                if (e.key === 'Tab' && !this.open) this.open = true;
+                if (!this.open) return;
+                const { selectionEnd, value } = e.target;
+                this.sterm = value.substr(0, selectionEnd).split(/\s+/g).pop();
+
+                if (this.sterm.length < 3) {
+                    this.reset();
+                    return;
+                }
+                this.title = this.sterm;
+                this.emotes = EmoteModule.filter(new RegExp(this.sterm, ''), 10);
+                this.open = this.emotes.length;
+            },
+            traverse(e) {
+                if (!this.open) return false;
+                if (e.key === 'ArrowUp') {
+                    this.selectedIndex = (this.selectedIndex - 1) < 0 ? 9 : this.selectedIndex - 1;
+                    return true;
+                }
+                if (e.key === 'ArrowDown') {
+                    this.selectedIndex = (this.selectedIndex + 1) >= 10 ? 0 : this.selectedIndex + 1;
+                    return true;
+                }
+                return false;
+            },
+            searchEmotesOLD(e) {
                 if (e.key === 'ArrowDown' && this.open && this.caret) {
                     this.selectedIndex = (this.selectedIndex + 1) >= 10 ? 0 : this.selectedIndex + 1;
                     return;
@@ -99,7 +133,7 @@
                 if (e.key === 'Tab' && !this.open) this.open = true;
                 if (!this.open) return;
                 const se = e.target.selectionEnd;
-                this.sterm = e.target.value.substr(0, se).split(' ').slice(-1).pop();
+                this.sterm = e.target.value.substr(0, se).split(/\s+/g).pop();
 
                 if (this.sterm.length < 3) {
                     this.reset();
@@ -121,19 +155,13 @@
             inject(emote) {
                 const ta = document.querySelector('.chat textarea');
                 if (!ta) return;
-                const currentText = document.querySelector('.chat textarea').value;
-                const se = ta.selectionEnd;
-                const split = currentText.substr(0, se).split(' ');
-                split.pop();
-                split.push(`:${emote.id}:`);
-                const join = split.join(' ');
-                const rest = currentText.substr(se, currentText.length);
-                DOM.manip.setText(join + ' ' + rest, false);
-                this.emotes = [];
-                this.open = false;
-                this.selectedIndex = 0;
-                this.selected = '';
-                ta.selectionEnd = ta.selectionStart = se + `:${emote.id}:`.length - this.title.length;
+                const { selectionEnd, value } = ta;
+                const en = `:${emote.id}:`;
+                let substr = value.substr(0, selectionEnd);
+                substr = substr.replace(new RegExp(this.sterm + '$'), en);
+
+                DOM.manip.setText(substr + value.substr(selectionEnd, value.length), false);
+                ta.selectionEnd = ta.selectionStart = selectionEnd + en.length - this.sterm.length;
             }
         }
     }