fix: Fix error on autocomplete key presses (#517)

Fixes #516.

.vscode/settings.json

@@ -7,6 +7,7 @@
     "contextlines",
     "Endcaps",
     "fontsource",
+    "getsentry",
     "iife",
     "outro",
     "pageload",

packages/overlay/src/App.tsx

@@ -166,7 +166,7 @@ export default function App({
     return { clearEvents, onEvent, onOpen, onClose, onNavigate, onToggle };
   }, [integrations, navigate, sidecarUrl, contentTypeListeners]);
 
-  useKeyPress(['ctrlKey', 'F12'], eventHandlers.onToggle);
+  useKeyPress('F12', ['ctrlKey'], eventHandlers.onToggle);
 
   useEffect(() => {
     log('useEffect: Adding event listeners');

packages/overlay/src/components/Tabs.tsx

@@ -34,7 +34,7 @@ export default function Tabs({ tabs, nested, setOpen }: Props) {
   const navigate = useNavigate();
   const location = useLocation();
 
-  useKeyPress(['Escape'], () => {
+  useKeyPress('Escape', [], () => {
     if (setOpen && location.pathname.split('/').length === 2) {
       setOpen(false);
     } else {

packages/overlay/src/lib/useKeyPress.ts

@@ -1,29 +1,34 @@
 import { useEffect } from 'react';
 
+type ModifierKeys = 'altKey' | 'ctrlKey' | 'shiftKey' | 'metaKey';
+
 /**
  * useKeyPress
- * @param {string[]} keys - an array of keys to respond to, compared against event.key
+ * @param {string} key - The letter or name of the key to respond to -- this is normalized to lower case
+ * @param {ModifierKeys[]} modifiers - The modifiers that needs to be activated such as ctrlKey
  * @param {function} action - the action to perform on key press
  * @param {boolean} propagate - whether to stop event propagation (default is false)
  */
-export default function useKeyPress(keys: string[], action: () => void, propagate = false) {
+export default function useKeyPress(key: string, modifiers: ModifierKeys[], action: () => void, propagate = false) {
+  const normalizedKey = key.toLowerCase();
   useEffect(() => {
-    function onKeyup(e: KeyboardEvent) {
+    function onKeyup(evt: KeyboardEvent) {
       if (!propagate) {
-        e.stopPropagation();
+        evt.stopPropagation();
+      }
+
+      // We don't respond to modifier-only key presses
+      if (!evt.key) {
+        return;
       }
 
-      if (
-        keys.every((key: string) =>
-          key in e ? e[key as keyof KeyboardEvent] : e.key.toLowerCase() === key.toLowerCase(),
-        )
-      ) {
+      if (modifiers.every(key => evt[key]) && evt.key.toLowerCase() === normalizedKey) {
         action();
       }
     }
 
     window.addEventListener('keyup', onKeyup);
 
     return () => window.removeEventListener('keyup', onKeyup) as undefined;
-  }, [keys, action, propagate]);
+  }, [normalizedKey, modifiers, action, propagate]);
 }