Global 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 intranet, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The search 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 component 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.

rowsFor(query, opened) is a plain function from the query and the groups you opened to the rows, so every library renders the same list. A type's matches are the hits whose title, path or role, or keywords hold the query, ignoring case and accents, with title matches first. A group shows three, and past three its last row opens it in place: the query stays, the row stays highlighted, and the polite status line inside the menu says "Showing all 9 people". Typing starts the groups over at three.

Here it changes the last crumb of the drawn page and the status line says which page, document, person or tag was opened and that nothing loaded. In your app send the visitor to the result's address in pick, or navigate with your router; and replace the typed ALL list with your search endpoint's results, turning each hit into a row in rowsFor, with the counts from the response rather than from the list.

Yes, once typing pauses for about half a second, never on every key: a polite live region in the foot of the menu says "14 results in 4 types". It sits inside the menu on purpose, because a modal dialog hides everything around it from a screen reader. The visible count is hidden from assistive technology so it is not read twice.

Yes. Type to search, the arrow keys move through the rows, Enter chooses or opens a group, and Escape closes the menu and puts focus on the search field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then, because the site's own search owns the key everywhere else. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The real dialog is named by its title and described by its sentence.

The copy shown on load docks to the top of the page, so the keyboard does not cover the foot, and its rows truncate on one line; the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.