Remove jquery from autocompletion

client/components/ChatInput.vue

@@ -8,7 +8,6 @@
 			:value="channel.pendingMessage"
 			:placeholder="getInputPlaceholder(channel)"
 			:aria-label="getInputPlaceholder(channel)"
-			class="mousetrap"
 			@input="setPendingMessage"
 			@keypress.enter.exact.prevent="onSubmit"
 		/>
@@ -49,6 +48,7 @@
 </template>
 
 <script>
+import autocompletion from "../js/autocompletion";
 const commands = require("../js/commands/index");
 const socket = require("../js/socket");
 const upload = require("../js/upload");
@@ -80,6 +80,8 @@ const bracketWraps = {
 	_: "_",
 };
 
+let autocompletionRef = null;
+
 export default {
 	name: "ChatInput",
 	props: {
@@ -93,7 +95,7 @@ export default {
 	},
 	mounted() {
 		if (this.$store.state.settings.autocomplete) {
-			require("../js/autocompletion").enable(this.$refs.input);
+			autocompletionRef = autocompletion(this.$refs.input);
 		}
 
 		const inputTrap = Mousetrap(this.$refs.input);
@@ -152,7 +154,11 @@ export default {
 		}
 	},
 	destroyed() {
-		require("../js/autocompletion").disable();
+		if (autocompletionRef) {
+			autocompletionRef.destroy();
+			autocompletionRef = null;
+		}
+
 		upload.abort();
 	},
 	methods: {
@@ -201,6 +207,10 @@ export default {
 				return false;
 			}
 
+			if (autocompletionRef) {
+				autocompletionRef.hide();
+			}
+
 			this.channel.inputHistoryPosition = 0;
 			this.channel.pendingMessage = "";
 			this.$refs.input.value = "";

client/js/autocompletion.js

@@ -1,6 +1,5 @@
 "use strict";
 
-const $ = require("jquery");
 const fuzzy = require("fuzzy");
 const Mousetrap = require("mousetrap");
 const {Textcomplete, Textarea} = require("textcomplete");
@@ -8,23 +7,7 @@ const emojiMap = require("./helpers/simplemap.json");
 const constants = require("./constants");
 const store = require("./store").default;
 
-let input;
+export default enableAutocomplete;
-let textcomplete;
-let enabled = false;
-
-module.exports = {
-	enable: enableAutocomplete,
-	disable() {
-		if (enabled) {
-			$("#form").off("submit.tabcomplete");
-			input.off("input.tabcomplete");
-			Mousetrap(input.get(0)).unbind("tab", "keydown");
-			textcomplete.destroy();
-			enabled = false;
-			store.commit("isAutoCompleting", false);
-		}
-	},
-};
 
 const emojiSearchTerms = Object.keys(emojiMap);
 const emojiStrategy = {
@@ -66,7 +49,7 @@ const nicksStrategy = {
 		}
 
 		// If there is whitespace in the input already, append space to nick
-		if (position > 0 && /\s/.test($("#input").val())) {
+		if (position > 0 && /\s/.test(store.state.activeChannel.channel.pendingMessage)) {
 			return original + " ";
 		}
 
@@ -175,14 +158,12 @@ const backgroundColorStrategy = {
 	index: 2,
 };
 
-function enableAutocomplete(inputRef) {
+function enableAutocomplete(input) {
-	enabled = true;
 	let tabCount = 0;
 	let lastMatch = "";
 	let currentMatches = [];
-	input = $(inputRef);
 
-	input.on("input.tabcomplete", (e) => {
+	input.addEventListener("input", (e) => {
 		if (e.detail === "autocomplete") {
 			return;
 		}
@@ -192,7 +173,7 @@ function enableAutocomplete(inputRef) {
 		lastMatch = "";
 	});
 
-	Mousetrap(input.get(0)).bind(
+	Mousetrap(input).bind(
 		"tab",
 		(e) => {
 			if (store.state.isAutoCompleting) {
@@ -201,12 +182,11 @@ function enableAutocomplete(inputRef) {
 
 			e.preventDefault();
 
-			const text = input.val();
+			const text = input.value;
-			const element = input.get(0);
 
 			if (tabCount === 0) {
 				lastMatch = text
-					.substring(0, element.selectionStart)
+					.substring(0, input.selectionStart)
 					.split(/\s/)
 					.pop();
 
@@ -221,19 +201,19 @@ function enableAutocomplete(inputRef) {
 				}
 			}
 
-			const position = element.selectionStart - lastMatch.length;
+			const position = input.selectionStart - lastMatch.length;
 			const newMatch = nicksStrategy.replace(
 				[0, currentMatches[tabCount % currentMatches.length]],
 				position
 			);
-			const remainder = text.substr(element.selectionStart);
+			const remainder = text.substr(input.selectionStart);
 
-			input.val(text.substr(0, position) + newMatch + remainder);
+			input.value = text.substr(0, position) + newMatch + remainder;
-			element.selectionStart -= remainder.length;
+			input.selectionStart -= remainder.length;
-			element.selectionEnd = element.selectionStart;
+			input.selectionEnd = input.selectionStart;
 
 			// Propagate change to Vue model
-			element.dispatchEvent(
+			input.dispatchEvent(
 				new CustomEvent("input", {
 					detail: "autocomplete",
 				})
@@ -245,8 +225,8 @@ function enableAutocomplete(inputRef) {
 		"keydown"
 	);
 
-	const editor = new Textarea(input.get(0));
+	const editor = new Textarea(input);
-	textcomplete = new Textcomplete(editor, {
+	const textcomplete = new Textcomplete(editor, {
 		dropdown: {
 			className: "textcomplete-menu",
 			placement: "top",
@@ -278,9 +258,15 @@ function enableAutocomplete(inputRef) {
 		store.commit("isAutoCompleting", false);
 	});
 
-	$("#form").on("submit.tabcomplete", () => {
+	return {
+		hide() {
 			textcomplete.hide();
-	});
+		},
+		destroy() {
+			textcomplete.destroy();
+			store.commit("isAutoCompleting", false);
+		},
+	};
 }
 
 function fuzzyGrep(term, array) {
@@ -318,7 +304,7 @@ function completeNicks(word, isFuzzy) {
 		return fuzzyGrep(word, users);
 	}
 
-	return $.grep(users, (w) => !w.toLowerCase().indexOf(word));
+	return users.filter((w) => !w.toLowerCase().indexOf(word));
 }
 
 function completeCommands(word) {