From 52bf7b116e24e5e06bcde99d4ddf6d8c77011d8e Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Tue, 17 Mar 2020 12:00:33 +0200 Subject: [PATCH] Do not handle keybinds in inputs if not empty Fix #3813 --- client/components/App.vue | 9 +++------ client/components/NetworkList.vue | 21 ++++++++++++++++----- client/js/helpers/isIgnoredKeybind.js | 12 ++++++++++++ client/js/keybinds.js | 15 ++++++++++----- 4 files changed, 41 insertions(+), 16 deletions(-) create mode 100644 client/js/helpers/isIgnoredKeybind.js diff --git a/client/components/App.vue b/client/components/App.vue index fbbe9ccf..49ba5a88 100644 --- a/client/components/App.vue +++ b/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; } diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue index fda73271..d7d420df 100644 --- a/client/components/NetworkList.vue +++ b/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; } diff --git a/client/js/helpers/isIgnoredKeybind.js b/client/js/helpers/isIgnoredKeybind.js new file mode 100644 index 00000000..7edef49d --- /dev/null +++ b/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; +}; diff --git a/client/js/keybinds.js b/client/js/keybinds.js index e34e33cc..daee796f 100644 --- a/client/js/keybinds.js +++ b/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; }