fix(devtools): ignore the hotkey while focus is in an editable element (#325)

* fix: ignore the hotkey while focus is in an editable element by guarding the createShortcut callback

* fix: enhance shortcut functionality by preventing activation in editable elements

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Kinbaum

.changeset/hungry-donkeys-allow.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Ignore the hotkey while focus is in an editable element by guarding the createShortcut callback

packages/devtools/src/devtools.tsx

@@ -165,10 +165,25 @@ export default function DevTools() {
     }
   })
   createEffect(() => {
+    const isEditableTarget = (element: Element | null) => {
+      if (!element || !(element instanceof HTMLElement)) return false
+      if (element.isContentEditable) return true
+      const tagName = element.tagName
+      if (
+        tagName === 'INPUT' ||
+        tagName === 'TEXTAREA' ||
+        tagName === 'SELECT'
+      ) {
+        return true
+      }
+      return element.getAttribute('role') === 'textbox'
+    }
+
     const permutations = getHotkeyPermutations(settings().openHotkey)
 
     for (const permutation of permutations) {
       createShortcut(permutation, () => {
+        if (isEditableTarget(document.activeElement)) return
         toggleOpen()
       })
     }