Merge pull request #3814 from thelounge/xpaw/fix-3813

Do not handle navigation keybinds in inputs if not empty

client/components/App.vue

@@ -15,6 +15,7 @@ const constants = require("../js/constants");
 import Mousetrap from "mousetrap";
 import throttle from "lodash/throttle";
 import storage from "../js/localStorage";
+import isIgnoredKeybind from "../js/helpers/isIgnoredKeybind";
 
 import Sidebar from "./Sidebar.vue";
 import ImageViewer from "./ImageViewer.vue";
@@ -76,9 +77,7 @@ export default {
 			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
-			if (e.target.tagName === "TEXTAREA") {
+			if (isIgnoredKeybind(e)) {
 				return true;
 			}
 
@@ -87,9 +86,7 @@ export default {
 			return false;
 		},
 		toggleUserList(e) {
-			// Do not handle this keybind in the chat input because
-			// it can be used to type letters with umlauts
-			if (e.target.tagName === "TEXTAREA") {
+			if (isIgnoredKeybind(e)) {
 				return true;
 			}
 

client/components/NetworkList.vue

@@ -193,6 +193,7 @@ import JoinChannel from "./JoinChannel.vue";
 
 import socket from "../js/socket";
 import collapseNetwork from "../js/helpers/collapseNetwork";
+import isIgnoredKeybind from "../js/helpers/isIgnoredKeybind";
 
 export default {
 	name: "NetworkList",
@@ -251,15 +252,27 @@ export default {
 		Mousetrap.unbind("alt+j", this.toggleSearch);
 	},
 	methods: {
-		expandNetwork() {
+		expandNetwork(event) {
+			if (isIgnoredKeybind(event)) {
+				return true;
+			}
+
 			if (this.$store.state.activeChannel) {
 				collapseNetwork(this.$store.state.activeChannel.network, false);
 			}
+
+			return false;
 		},
-		collapseNetwork() {
+		collapseNetwork(event) {
+			if (isIgnoredKeybind(event)) {
+				return true;
+			}
+
 			if (this.$store.state.activeChannel) {
 				collapseNetwork(this.$store.state.activeChannel.network, true);
 			}
+
+			return false;
 		},
 		isCurrentlyInTouch(e) {
 			// TODO: Implement a way to sort on touch devices
@@ -299,9 +312,7 @@ export default {
 			});
 		},
 		toggleSearch(event) {
-			// Do not handle this keybind in the chat input because
-			// it can be used to type letters with umlauts
-			if (event.target.tagName === "TEXTAREA") {
+			if (isIgnoredKeybind(event)) {
 				return true;
 			}
 

client/js/helpers/isIgnoredKeybind.js

@@ -0,0 +1,12 @@
+"use strict";
+
+export default (event) => {
+	if (event.target.tagName !== "TEXTAREA" && event.target.tagName !== "INPUT") {
+		return false;
+	}
+
+	// If focus is in a textarea, do not handle keybinds if user has typed anything
+	// This is done to prevent keyboard layout binds conflicting with ours
+	// For example alt+shift+left on macos selects a word
+	return !!event.target.value;
+};

client/js/keybinds.js

@@ -5,9 +5,14 @@ import Mousetrap from "mousetrap";
 import store from "./store";
 import {switchToChannel} from "./router";
 import isChannelCollapsed from "./helpers/isChannelCollapsed";
+import isIgnoredKeybind from "./helpers/isIgnoredKeybind";
 
 // Switch to the next/previous window in the channel list.
 Mousetrap.bind(["alt+up", "alt+down"], function (e, keys) {
+	if (isIgnoredKeybind(e)) {
+		return true;
+	}
+
 	if (store.state.networks.length === 0) {
 		return false;
 	}
@@ -45,6 +50,10 @@ Mousetrap.bind(["alt+up", "alt+down"], function (e, keys) {
 
 // Switch to the next/previous lobby in the channel list
 Mousetrap.bind(["alt+shift+up", "alt+shift+down"], function (e, keys) {
+	if (isIgnoredKeybind(e)) {
+		return true;
+	}
+
 	const length = store.state.networks.length;
 
 	if (length === 0) {
@@ -72,11 +81,7 @@ Mousetrap.bind(["alt+shift+up", "alt+shift+down"], function (e, keys) {
 // Jump to the first window with a highlight in it, or the first with unread
 // activity if there are none with highlights.
 Mousetrap.bind(["alt+a"], function (e) {
-	// Do not handle this keybind in the chat input because
-	// it can be used to type letters with umlauts
-	// Normally this is not required, but since chat input has the "mousetrap"
-	// class for other keybinds to work, we need to add this check
-	if (e.target.tagName === "TEXTAREA") {
+	if (isIgnoredKeybind(e)) {
 		return true;
 	}