fix(hub-ui): dont throw on browser autocomplete (#471)

Author: OrbisK

packages/hub-ui/src/client/state/keybindings.test.ts

@@ -1,7 +1,7 @@
 import type { DevframeCommandEntry, DevframeCommandKeybinding } from '@devframes/hub'
 import type { WhenContext } from 'devframe/utils/when'
 import { describe, expect, it } from 'vitest'
-import { collectAllKeybindings, filterCommandsByWhen, findCommandDeep, findKeybindingConflict, getShortcutRows, walkCommands } from './keybindings'
+import { collectAllKeybindings, filterCommandsByWhen, findCommandDeep, findKeybindingConflict, getShortcutRows, normalizeKeyEvent, walkCommands } from './keybindings'
 
 describe('findKeybindingConflict', () => {
   const commands: DevframeCommandEntry[] = [
@@ -259,3 +259,17 @@ describe('filterCommandsByWhen', () => {
     expect(filterCommandsByWhen(withWhen, whenContext)).toEqual([])
   })
 })
+
+describe('normalizeKeyEvent', () => {
+  // Chrome's native autofill dispatches `keydown` events without `key`
+  it('ignores key events without a key, like Chrome autofill', () => {
+    const event = { ctrlKey: false, metaKey: false, altKey: false, shiftKey: false } as KeyboardEvent
+    expect(() => normalizeKeyEvent(event)).not.toThrow()
+    expect(normalizeKeyEvent(event)).toBe('')
+  })
+
+  it('normalizes a regular shortcut', () => {
+    const event = { key: 'k', ctrlKey: false, metaKey: false, altKey: false, shiftKey: true } as KeyboardEvent
+    expect(normalizeKeyEvent(event)).toBe('Shift+K')
+  })
+})

packages/hub-ui/src/client/state/keybindings.ts

@@ -30,7 +30,7 @@ export function normalizeKeyEvent(e: KeyboardEvent): string {
     parts.push('Shift')
 
   // Normalize key name
-  let key = e.key
+  let key = e.key ?? ''
   if (key.length === 1)
     key = key.toUpperCase()