From 6ece82770f3f29ccf92a9fd84a7332c2796ccf35 Mon Sep 17 00:00:00 2001
From: Zerebos <me@zerebos.com>
Date: Sat, 7 Dec 2024 21:38:59 -0500
Subject: [PATCH] Adjust keybind handling

---
 .../src/ui/settings/components/keybind.jsx    | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/renderer/src/ui/settings/components/keybind.jsx b/renderer/src/ui/settings/components/keybind.jsx
index de0f8a72..0ce81e5d 100644
--- a/renderer/src/ui/settings/components/keybind.jsx
+++ b/renderer/src/ui/settings/components/keybind.jsx
@@ -7,15 +7,19 @@ import Close from "@ui/icons/close";
 const {useState, useCallback, useEffect} = React;
 
 
-export default function Keybind({value: initialValue, onChange, max = 2, clearable = true, disabled}) {
+export default function Keybind({value: initialValue, onChange, max = 4, clearable = true, disabled}) {
     const [state, setState] = useState({value: initialValue, isRecording: false, accum: []});
 
     useEffect(() => {
-        window.addEventListener("keydown", keyHandler, true);
-        return () => window.removeEventListener("keydown", keyHandler, true);
+        window.addEventListener("keydown", keyDownHandler, true);
+        window.addEventListener("keyup", keyUpHandler, true);
+        return () => {
+            window.removeEventListener("keydown", keyDownHandler, true);
+            window.removeEventListener("keyup", keyUpHandler, true);
+        };
     });
 
-    const keyHandler = useCallback((event) => {
+    const keyDownHandler = useCallback((event) => {
         if (!state.isRecording) return;
         event.stopImmediatePropagation();
         event.stopPropagation();
@@ -29,6 +33,15 @@ export default function Keybind({value: initialValue, onChange, max = 2, clearab
         }
     }, [state, max, onChange]);
 
+    const keyUpHandler = useCallback((event) => {
+        if (!state.isRecording) return;
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+
+        if (event.key === state.accum[0]) setState({value: state.accum.slice(0), isRecording: false, accum: []});
+    }, [state]);
+
     const clearKeybind = useCallback((event) => {
         event.stopPropagation();
         event.preventDefault();