From f3895d09e3b5a1fd7686ed8663b714f09d987cf3 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 29 Aug 2024 16:47:40 +0800
Subject: [PATCH] Fix radio inputs intercept arrow keys

---
 src/pages/catchup.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/pages/catchup.jsx b/src/pages/catchup.jsx
index 760df4a9..2fdcf2f3 100644
--- a/src/pages/catchup.jsx
+++ b/src/pages/catchup.jsx
@@ -822,6 +822,22 @@ function Catchup() {
     },
   );
 
+  const handleArrowKeys = useCallback((e) => {
+    const activeElement = document.activeElement;
+    const isRadio =
+      activeElement?.tagName === 'INPUT' && activeElement.type === 'radio';
+    const isArrowKeys =
+      e.key === 'ArrowDown' ||
+      e.key === 'ArrowUp' ||
+      e.key === 'ArrowLeft' ||
+      e.key === 'ArrowRight';
+    if (isArrowKeys && isRadio) {
+      // Note: page scroll won't trigger on first arrow key press due to this. Subsequent presses will.
+      activeElement.blur();
+      return;
+    }
+  }, []);
+
   return (
     <div
       ref={(node) => {
@@ -883,7 +899,7 @@ function Catchup() {
             </div>
           </div>
         </header>
-        <main>
+        <main onKeyDown={handleArrowKeys}>
           {uiState === 'start' && (
             <div class="catchup-start">
               <h1>