Key Binding Search Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the editor, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so what you typed in the copy is in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

While Listen is pressed a capture listener above the band and the input reads every key down, builds a combo from the modifiers and event.code ("mod+shift+KeyZ"), stops the event so it neither types nor moves the list, and rowsFor lists the bindings with that combo. "mod" is Command on a Mac and Control elsewhere, so one keymap serves both. Keys that are only a modifier are ignored until a key joins them. In your app, the same combo strings are what you would match your keymap against.

Yes, and that is why two keys are never captured: Tab, so the keyboard is never trapped in the field, and Escape, which stops listening and nothing more. In the copy and in the real dialog the first Escape (or a click away) only stops listening and says so; the next one closes the menu. Ctrl or ⌘ K is read as keys while listening, not as the shortcut that opens the dialog.

boundTo lists the commands with the same combo. A row whose keys are shared carries the word Shared, never a colour, and the band and the spoken line say who: "Two commands use ⌘ D: Duplicate line and Select next match." Free keys are said just as plainly. The keymap is typed data here; in your app it would be your commands and their current bindings.

Yes. Type to search, the arrow keys move through the rows, Enter shows the highlighted one and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. What the keys found is said in the polite message inside the menu.

A phone has no key to press, so Listen is left out there and the band says that key capture needs a hardware keyboard; the text search works as it does everywhere. The copy shown on load docks to the top of the page at full width and the key hints go.