Merge pull request #3721 from thelounge/xpaw/fix-3690

Fix escape key handling

client/components/App.vue

@@ -44,6 +44,7 @@ export default {
 		this.prepareOpenStates();
 	},
 	mounted() {
+		Mousetrap.bind("esc", this.escapeKey);
 		Mousetrap.bind("alt+u", this.toggleUserList);
 		Mousetrap.bind("alt+s", this.toggleSidebar);
 
@@ -64,6 +65,7 @@ export default {
 		this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
 	},
 	beforeDestroy() {
+		Mousetrap.unbind("esc", this.escapeKey);
 		Mousetrap.unbind("alt+u", this.toggleUserList);
 		Mousetrap.unbind("alt+s", this.toggleSidebar);
 
@@ -71,6 +73,9 @@ export default {
 		clearTimeout(this.dayChangeTimeout);
 	},
 	methods: {
+		escapeKey() {
+			this.$root.$emit("escapekey");
+		},
 		toggleSidebar(e) {
 			// Do not handle this keybind in the chat input because
 			// it can be used to type letters with umlauts

client/components/ChatInput.vue

@@ -101,6 +101,8 @@ export default {
 		},
 	},
 	mounted() {
+		this.$root.$on("escapekey", this.blurInput);
+
 		if (this.$store.state.settings.autocomplete) {
 			autocompletionRef = autocompletion(this.$refs.input);
 		}
@@ -161,6 +163,8 @@ export default {
 		}
 	},
 	destroyed() {
+		this.$root.$off("escapekey", this.blurInput);
+
 		if (autocompletionRef) {
 			autocompletionRef.destroy();
 			autocompletionRef = null;
@@ -255,6 +259,9 @@ export default {
 		openFileUpload() {
 			this.$refs.uploadInput.click();
 		},
+		blurInput() {
+			this.$refs.input.blur();
+		},
 	},
 };
 </script>

client/components/ContextMenu.vue

@@ -38,7 +38,6 @@
 </template>
 
 <script>
-import Mousetrap from "mousetrap";
 import {
 	generateUserContextMenu,
 	generateChannelContextMenu,
@@ -63,15 +62,13 @@ export default {
 		};
 	},
 	mounted() {
-		Mousetrap.bind("esc", this.close);
-
+		this.$root.$on("escapekey", this.close);
 		this.$root.$on("contextmenu:user", this.openUserContextMenu);
 		this.$root.$on("contextmenu:channel", this.openChannelContextMenu);
 		this.$root.$on("contextmenu:removenetwork", this.openRemoveNetworkContextMenu);
 	},
 	destroyed() {
-		Mousetrap.unbind("esc", this.close);
-
+		this.$root.$off("escapekey", this.close);
 		this.$root.$off("contextmenu:user", this.openUserContextMenu);
 		this.$root.$off("contextmenu:channel", this.openChannelContextMenu);
 		this.$root.$off("contextmenu:removenetwork", this.openRemoveNetworkContextMenu);

client/components/ImageViewer.vue

@@ -25,8 +25,6 @@
 </template>
 
 <script>
-import Mousetrap from "mousetrap";
-
 export default {
 	name: "ImageViewer",
 	data() {
@@ -68,10 +66,10 @@ export default {
 		},
 	},
 	mounted() {
-		Mousetrap.bind("esc", this.closeViewer);
+		this.$root.$on("escapekey", this.closeViewer);
 	},
 	destroyed() {
-		Mousetrap.unbind("esc", this.closeViewer);
+		this.$root.$off("escapekey", this.closeViewer);
 	},
 	methods: {
 		closeViewer() {