From 1ccfe2caa85fc45e79f86a14ef311d86d225484e Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Thu, 17 Sep 2020 19:57:44 -0700
Subject: [PATCH] chat: fixes scroll keys

fixes #3498
---
 .../src/views/components/VirtualScroller.tsx  | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx
index c253a8b81..92a85cb8e 100644
--- a/pkg/interface/src/views/components/VirtualScroller.tsx
+++ b/pkg/interface/src/views/components/VirtualScroller.tsx
@@ -58,6 +58,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
     this.heightOf = this.heightOf.bind(this);
     this.setScrollTop = this.setScrollTop.bind(this);
     this.scrollToData = this.scrollToData.bind(this);
+    this.scrollKeyMap = this.scrollKeyMap.bind(this);
     this.loadRows = _.memoize(this.loadRows).bind(this);
   }
 
@@ -164,7 +165,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
       this.loadRows(firstNeededKey, firstVisibleKey - 1);
     }
     const lastVisibleKey = Array.from(visibleItems.keys())[visibleItems.size - 1] ?? this.estimateIndexFromScrollTop(scrollTop + windowHeight);
-    const lastNeededKey = Math.min(lastVisibleKey + this.OVERSCAN_SIZE, totalSize)
+    const lastNeededKey = Math.min(lastVisibleKey + this.OVERSCAN_SIZE, totalSize);
     if (!data.has(lastNeededKey - 1)) {
       this.loadRows(lastVisibleKey + 1, lastNeededKey);
     }
@@ -198,25 +199,46 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
     };
   }
 
+  scrollKeyMap(): Map<string, number> {
+    return new Map([
+      ['ArrowUp', this.state.averageHeight],
+      ['ArrowDown', this.state.averageHeight * -1],
+      ['PageUp', this.window.offsetHeight],
+      ['PageDown', this.window.offsetHeight * -1],
+      ['Home', this.window.scrollHeight],
+      ['End', this.window.scrollHeight * -1],
+      ['Space', this.window.offsetHeight * -1]
+    ]);
+  }
+
   invertedKeyHandler(event): void | false {
-    if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+    const map = this.scrollKeyMap();
+    if (map.has(event.code) && document.body.isSameNode(document.activeElement)) {
       event.preventDefault();
       event.stopImmediatePropagation();
-      if (event.code === 'ArrowUp') {
-        this.window.scrollBy(0, 30);
-      } else if (event.code === 'ArrowDown') {
-        this.window.scrollBy(0, -30);
+      let distance = map.get(event.code); 
+      if (event.code === 'Space' && event.shiftKey) {
+        distance = distance * -1;
       }
+      this.window.scrollBy(0, distance);
       return false;
     }
   }
 
   componentWillUnmount() {
-    window.removeEventListener('keydown', this.invertedKeyHandler, true);
+    window.removeEventListener('keydown', this.invertedKeyHandler);
   }
   
   setWindow(element) {
-    if (this.window) return;
+    if (!element) return;
+    if (this.window) {
+      if (this.window.isSameNode(element)) {
+        return;
+      } else {
+        window.removeEventListener('keydown', this.invertedKeyHandler);
+      }
+    }
+
     this.window = element;
     if (this.props.origin === 'bottom') {
       element.addEventListener('wheel', (event) => {