Using the up and down keys scrolls the page (#843)

* Make methods in KeyHandler private * Using the up and down keys scrolls the page * Build * Changelog
mbraak · Oct 11, 2024 · 97fb9a5 · 97fb9a5
1 parent e90c995
commit 97fb9a5
Show file tree

Hide file tree

Showing 6 changed files with 2,565 additions and 2,545 deletions.
diff --git a/docs/_entries/general/changelog.md b/docs/_entries/general/changelog.md
@@ -3,6 +3,10 @@ title: Changelog
 name: changelog
 ---
 
+### Development version
+
+-   Issue #840: using the up and down keys scrolls the page
+
 ### 1.8.5 (september 28 2024)
 
 -   Update packages

diff --git a/src/keyHandler.ts b/src/keyHandler.ts
@@ -22,31 +22,36 @@ export default class KeyHandler {
     private closeNode: CloseNode;
     private getSelectedNode: GetSelectedNode;
 
-    private handleKeyDown = (e: KeyboardEvent): boolean => {
+    private handleKeyDown = (e: KeyboardEvent): void => {
         if (!this.canHandleKeyboard()) {
-            return true;
+            return;
         }
 
+        let isKeyHandled = false;
+
         const selectedNode = this.getSelectedNode();
-        if (!selectedNode) {
-            return true;
+        if (selectedNode) {
+            switch (e.key) {
+                case "ArrowDown":
+                    isKeyHandled = this.moveDown(selectedNode);
+                    break;
+
+                case "ArrowUp":
+                    isKeyHandled = this.moveUp(selectedNode);
+                    break;
+
+                case "ArrowRight":
+                    isKeyHandled = this.moveRight(selectedNode);
+                    break;
+
+                case "ArrowLeft":
+                    isKeyHandled = this.moveLeft(selectedNode);
+                    break;
+            }
         }
 
-        switch (e.key) {
-            case "ArrowDown":
-                return this.moveDown(selectedNode);
-
-            case "ArrowUp":
-                return this.moveUp(selectedNode);
-
-            case "ArrowRight":
-                return this.moveRight(selectedNode);
-
-            case "ArrowLeft":
-                return this.moveLeft(selectedNode);
-
-            default:
-                return true;
+        if (isKeyHandled) {
+            e.preventDefault();
         }
     };
 
@@ -72,40 +77,28 @@ export default class KeyHandler {
         this.originalSelectNode = selectNode;
 
         if (keyboardSupport) {
-            this.handleKeyDownHandler = this.handleKeyDown.bind(this);
-
-            document.addEventListener("keydown", this.handleKeyDownHandler);
+            document.addEventListener("keydown", this.handleKeyDown);
         }
     }
 
     private canHandleKeyboard(): boolean {
         return this.keyboardSupport && this.isFocusOnTree();
     }
 
-    public deinit(): void {
-        if (this.handleKeyDownHandler) {
-            document.removeEventListener("keydown", this.handleKeyDownHandler);
-        }
-    }
-
-    public moveDown(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getNextVisibleNode());
-    }
-
-    public moveLeft(selectedNode: Node): boolean {
+    private moveLeft(selectedNode: Node): boolean {
         if (selectedNode.isFolder() && selectedNode.is_open) {
             // Left on an open node closes the node
             this.closeNode(selectedNode);
-            return false;
+            return true;
         } else {
             // Left on a closed or end node moves focus to the node's parent
             return this.selectNode(selectedNode.getParent());
         }
     }
 
-    public moveRight(selectedNode: Node): boolean {
+    private moveRight(selectedNode: Node): boolean {
         if (!selectedNode.isFolder()) {
-            return true;
+            return false;
         } else {
             // folder node
             if (selectedNode.is_open) {
@@ -114,22 +107,36 @@ export default class KeyHandler {
             } else {
                 // Right expands a closed node
                 this.openNode(selectedNode);
-                return false;
+                return true;
             }
         }
     }
 
-    public moveUp(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getPreviousVisibleNode());
-    }
-
-    public selectNode(node: Node | null): boolean {
+    /* Select the node.
+     * Don't do anything if the node is null.
+     * Result: a different node was selected.
+     */
+    private selectNode(node: Node | null): boolean {
         if (!node) {
-            return true;
+            return false;
         } else {
             this.originalSelectNode(node);
 
-            return false;
+            return true;
         }
     }
+
+    public deinit(): void {
+        if (this.handleKeyDownHandler) {
+            document.removeEventListener("keydown", this.handleKeyDownHandler);
+        }
+    }
+
+    public moveDown(selectedNode: Node): boolean {
+        return this.selectNode(selectedNode.getNextVisibleNode());
+    }
+
+    public moveUp(selectedNode: Node): boolean {
+        return this.selectNode(selectedNode.getPreviousVisibleNode());
+    }
 }