From c8568b54293beb4b85eaf4a32ac558cc6948a8bd Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Wed, 13 Feb 2019 10:19:29 +0200
Subject: [PATCH] Redirect pageup/pagedown without manually animating the
 scroll

---
 client/components/ChatUserList.vue | 14 +++++++-----
 client/components/MessageList.vue  |  3 ++-
 client/css/style.css               |  1 +
 client/js/keybinds.js              | 35 +++++-------------------------
 4 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/client/components/ChatUserList.vue b/client/components/ChatUserList.vue
index 10917994..60240f0d 100644
--- a/client/components/ChatUserList.vue
+++ b/client/components/ChatUserList.vue
@@ -13,10 +13,10 @@
 				aria-label="Search among the user list"
 				tabindex="-1"
 				@input="setUserSearchInput"
-				@keydown.up="navigateUserList(-1)"
-				@keydown.down="navigateUserList(1)"
-				@keydown.page-up="navigateUserList(-10)"
-				@keydown.page-down="navigateUserList(10)"
+				@keydown.up="navigateUserList($event, -1)"
+				@keydown.down="navigateUserList($event, 1)"
+				@keydown.page-up="navigateUserList($event, -10)"
+				@keydown.page-down="navigateUserList($event, 10)"
 				@keydown.enter="selectUser">
 		</div>
 		<div class="names">
@@ -146,7 +146,11 @@ export default {
 		removeHoverUser() {
 			this.activeUser = null;
 		},
-		navigateUserList(direction) {
+		navigateUserList(event, direction) {
+			// Prevent propagation to stop global keybind handler from capturing pagedown/pageup
+			// and redirecting it to the message list container for scrolling
+			event.stopImmediatePropagation();
+
 			let users = this.channel.users;
 
 			// Only using filteredUsers when we have to avoids filtering when it's not needed
diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index 3ac2c5e7..012f6451 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -1,7 +1,8 @@
 <template>
 	<div
 		ref="chat"
-		class="chat">
+		class="chat"
+		tabindex="-1">
 		<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
 			<button
 				ref="loadMoreButton"
diff --git a/client/css/style.css b/client/css/style.css
index 44677dc2..28123ade 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1044,6 +1044,7 @@ background on hover (unless active) */
 	flex-direction: column;
 	overscroll-behavior: contain;
 	-webkit-overflow-scrolling: touch;
+	outline: none;
 }
 
 #chat .userlist {
diff --git a/client/js/keybinds.js b/client/js/keybinds.js
index fb28dc6c..d1b65364 100644
--- a/client/js/keybinds.js
+++ b/client/js/keybinds.js
@@ -4,33 +4,6 @@ const $ = require("jquery");
 const Mousetrap = require("mousetrap");
 const utils = require("./utils");
 
-Mousetrap.bind([
-	"pageup",
-	"pagedown",
-], function(e, key) {
-	let container = $("#windows .window.active");
-
-	// Chat windows scroll message container
-	if (container.prop("id") === "chat-container") {
-		container = container.find(".chan.active .chat");
-	}
-
-	container.finish();
-
-	const offset = container.get(0).clientHeight * 0.9;
-	let scrollTop = container.scrollTop();
-
-	if (key === "pageup") {
-		scrollTop = Math.floor(scrollTop - offset);
-	} else {
-		scrollTop = Math.ceil(scrollTop + offset);
-	}
-
-	container.animate({scrollTop}, 200);
-
-	return false;
-});
-
 Mousetrap.bind([
 	"alt+up",
 	"alt+down",
@@ -104,8 +77,6 @@ const ignoredKeys = {
 	19: true, // Pause
 	20: true, // CapsLock
 	27: true, // Escape
-	33: true, // PageUp
-	34: true, // PageDown
 	35: true, // End
 	36: true, // Home
 	37: true, // ArrowLeft
@@ -143,6 +114,12 @@ $(document).on("keydown", (e) => {
 		return;
 	}
 
+	// Redirect pagedown/pageup keys to messages container so it scrolls
+	if (e.which === 33 || e.which === 34) {
+		$("#windows .window.active .chan.active .chat").trigger("focus");
+		return;
+	}
+
 	const tagName = e.target.tagName;
 
 	// Ignore if we're already typing into <input> or <textarea>