Shortcut Recorder Field

About this component

Any app with a shortcuts panel needs this field, and almost every implementation gets the same thing wrong: it stores the character the key produced rather than the key itself. KeyboardEvent.key is layout-dependent, so binding Alt+K on macOS records a degree sign, and the same physical key on an AZERTY keyboard records a different letter entirely. KeyboardEvent.code is the physical position, which is what a shortcut actually means. The second omission is more damaging. A handful of chords belong to the browser or the operating system, and preventDefault cannot hold them — the event often never reaches the page. Capturing Cmd+W and displaying it as bound hands the user a shortcut that closes their tab on every press, so those chords are refused with a stated reason instead. Recording listens in the capture phase and stops propagation, which keeps the browser find bar closed and the app own hotkeys quiet while a chord is being chosen. Modifier keys are shown as they are held rather than ending the capture, and the platform-specific glyphs are resolved through useSyncExternalStore because reading navigator during render is a hydration mismatch waiting to happen.