From 8abf23191269db38453c5f90dfcec4dc4826d45e Mon Sep 17 00:00:00 2001
From: PandaDEV <70103896+0PandaDEV@users.noreply.github.com>
Date: Sun, 16 Mar 2025 23:38:52 +0100
Subject: [PATCH] feat: enhance keybind input handling with Escape key
 functionality and improved keyboard context management

---
 pages/settings.vue | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 5f0c7c5..4bbf980 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -45,6 +45,7 @@
           <div
             @blur="onBlur"
             @focus="onFocus"
+            @keydown="onKeyDown"
             class="keybind-input"
             ref="keybindInput"
             tabindex="0"
@@ -88,6 +89,7 @@ const isKeybindInputFocused = ref(false);
 const keybind = ref<KeyValues[]>([]);
 const keybindInput = ref<HTMLElement | null>(null);
 const lastBlurTime = ref(0);
+const blurredByEscape = ref(false);
 const os = ref("");
 const router = useRouter();
 const showEmptyKeybindError = ref(false);
@@ -127,6 +129,7 @@ const onBlur = () => {
 
 const onFocus = () => {
   isKeybindInputFocused.value = true;
+  blurredByEscape.value = false;
   activeModifiers.clear();
   keybind.value = [];
   showEmptyKeybindError.value = false;
@@ -137,7 +140,10 @@ const onKeyDown = (event: KeyboardEvent) => {
 
   if (key === KeyValues.Escape) {
     if (keybindInput.value) {
+      blurredByEscape.value = true;
       keybindInput.value.blur();
+      event.preventDefault();
+      event.stopPropagation();
     }
     return;
   }
@@ -201,36 +207,30 @@ onMounted(async () => {
 
   if (os.value === "macos") {
     $keyboard.on("settings", [$keyboard.Key.LeftMeta, $keyboard.Key.Enter], () => {
-      if (!isKeybindInputFocused.value) {
-        saveKeybind();
-      }
-    }, { priority: $keyboard.PRIORITY.MEDIUM });
+      saveKeybind();
+    }, { priority: $keyboard.PRIORITY.HIGH });
     
     $keyboard.on("settings", [$keyboard.Key.RightMeta, $keyboard.Key.Enter], () => {
-      if (!isKeybindInputFocused.value) {
-        saveKeybind();
-      }
-    }, { priority: $keyboard.PRIORITY.MEDIUM });
+      saveKeybind();
+    }, { priority: $keyboard.PRIORITY.HIGH });
   } else {
     $keyboard.on("settings", [$keyboard.Key.LeftControl, $keyboard.Key.Enter], () => {
-      if (!isKeybindInputFocused.value) {
-        saveKeybind();
-      }
-    }, { priority: $keyboard.PRIORITY.MEDIUM });
+      saveKeybind();
+    }, { priority: $keyboard.PRIORITY.HIGH });
     
     $keyboard.on("settings", [$keyboard.Key.RightControl, $keyboard.Key.Enter], () => {
-      if (!isKeybindInputFocused.value) {
-        saveKeybind();
-      }
-    }, { priority: $keyboard.PRIORITY.MEDIUM });
+      saveKeybind();
+    }, { priority: $keyboard.PRIORITY.HIGH });
   }
 
   $keyboard.on("settings", [$keyboard.Key.Escape], () => {
-    if (!isKeybindInputFocused.value) {
+    if (!isKeybindInputFocused.value && !blurredByEscape.value) {
       router.push("/");
     }
-  }, { priority: $keyboard.PRIORITY.MEDIUM });
+    blurredByEscape.value = false;
+  }, { priority: $keyboard.PRIORITY.HIGH });
 
+  $keyboard.disableContext("main");
   $keyboard.enableContext("settings");
   
   autostart.value = (await $settings.getSetting("autostart")) === "true";