From ebcd4cabff784c84d02a91dd9bc5207165dbc50f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gregor=20D=C3=BCster?= <git@gdstr.eu>
Date: Tue, 30 Jan 2024 13:05:23 +0100
Subject: [PATCH] Prevent tab switching in user view when adjusting selection

Fixes https://github.com/agdsn/pycroft/issues/694
---
 web/resources/js/user-suite.ts | 38 ++++++++++++++--------------------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/web/resources/js/user-suite.ts b/web/resources/js/user-suite.ts
index ba55416b4..1c7741eea 100644
--- a/web/resources/js/user-suite.ts
+++ b/web/resources/js/user-suite.ts
@@ -5,32 +5,24 @@
  */
 
 function handleKeyPress(event: KeyboardEvent) {
-    // checks rather the input was triggered in a text area then it is dismissed
-    if(event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) return;
+    // Dismiss event in case it was triggered in a text area or the shift key was (already) pressed
+    if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.shiftKey) return;
 
-    if (event.key === "ArrowRight" ){
-        const navLinks = [...document.querySelectorAll<HTMLElement>(".user-nav-link")].filter(x => !x.classList.contains("disabled"));
-        for (let i= 0; i < navLinks.length; i++){
-            if(navLinks[i].classList.contains("active")) {
-                let index = (i + 1) % navLinks.length;
-                navLinks[index].click();
-                break;
-            }
-        }
-    }
+    if !(event.key === "ArrowRight" || event.key === "ArrowLeft") return;
+
+    const navLinks = [...document.querySelectorAll<HTMLElement>(".user-nav-link")].filter(x => !x.classList.contains("disabled"));
+    const currentIndex = navLinks.findIndex(link => link.classList.contains("active"));
 
-    if (event.key === "ArrowLeft" ){
-        const navLinks = [...document.querySelectorAll<HTMLElement>(".user-nav-link")].filter(x => !x.classList.contains("disabled"));
-        for (let i= 0; i < navLinks.length; i++){
-            if(navLinks[i].classList.contains("active")) {
-                let index = i - 1;
-                if (index < 0) index += (navLinks.length); // Ich hasse JS noch nicht mal mod kann das ordentlich
-                navLinks[index].click();
-                break;
-            }
+    const indexChange = (() => {
+        switch (event.key) {
+            case "ArrowRight":
+                return +1;
+            case "ArrowLeft":
+                return -1;
         }
-    }
+    })();
+
+    navLinks[(navLinks.length + currentIndex + indexChange) % navLinks.length].click();
 }
 
 document.addEventListener('keydown', handleKeyPress);
-