skip hotkey execution if user is in an input area

Author: NiloCK

packages/common-ui/src/utils/SkldrMouseTrap.ts

@@ -11,6 +11,21 @@ export interface HotKeyMetaData {
   hotkey: string | string[];
 }
 
+/**
+ * Checks if focus is currently on an input element where hotkeys should be ignored
+ * @returns true if hotkeys should be ignored, false otherwise
+ */
+function inputElementIsFocused(): boolean {
+  const activeElement = document.activeElement;
+  return (
+    activeElement instanceof HTMLElement &&
+    (activeElement.tagName === 'INPUT' ||
+      activeElement.tagName === 'TEXTAREA' ||
+      activeElement.tagName === 'SELECT' ||
+      activeElement.isContentEditable)
+  );
+}
+
 export class SkldrMouseTrap {
   private static _instance: SkldrMouseTrap;
 
@@ -45,7 +60,13 @@ export class SkldrMouseTrap {
     // Bind each hotkey
     hotkeys.forEach((k) => {
       Mousetrap.bindGlobal(k.hotkey, (a, b) => {
-        console.log(`Running ${k.hotkey}`);
+        // Skip execution if focus is on input elements
+        if (inputElementIsFocused()) {
+          console.log(`Ignoring hotkey ${k.hotkey} while input element is focused`);
+          return;
+        }
+
+        // console.log(`Running ${k.hotkey}`);
         k.callback(a, b);
       });
     });
@@ -58,26 +79,29 @@ export class SkldrMouseTrap {
   public static removeBinding(hotkey: string | string[] | Array<string | string[]>) {
     const instance = SkldrMouseTrap.instance();
     const currentHotkeys = [...instance.hotkeys];
-    
-    if (Array.isArray(hotkey) && !hotkey.every(k => typeof k === 'string' || typeof k === 'number')) {
+
+    if (
+      Array.isArray(hotkey) &&
+      !hotkey.every((k) => typeof k === 'string' || typeof k === 'number')
+    ) {
       // If it's an array of hotkey specifiers
-      hotkey.forEach(key => {
+      hotkey.forEach((key) => {
         // Remove from internal registry
-        instance.hotkeys = instance.hotkeys.filter(k => {
+        instance.hotkeys = instance.hotkeys.filter((k) => {
           return JSON.stringify(k.hotkey) !== JSON.stringify(key);
         });
-        
+
         // Unbind from Mousetrap
         Mousetrap.unbind(key);
       });
     } else {
       // Single hotkey removal (original implementation)
       // Remove from internal registry
-      instance.hotkeys = currentHotkeys.filter(k => {
+      instance.hotkeys = currentHotkeys.filter((k) => {
         // Convert both to JSON for comparison to handle arrays correctly
         return JSON.stringify(k.hotkey) !== JSON.stringify(hotkey);
       });
-      
+
       // Unbind from Mousetrap
       Mousetrap.unbind(hotkey);
     }
@@ -90,7 +114,7 @@ export class SkldrMouseTrap {
   public static reset() {
     console.warn(
       'SkldrMouseTrap.reset() may affect hotkeys registered by other components. ' +
-      'Consider using removeBinding() with specific hotkeys for better component isolation.'
+        'Consider using removeBinding() with specific hotkeys for better component isolation.'
     );
     Mousetrap.reset();
     SkldrMouseTrap.instance().mouseTrap.reset();