Command Palette with a Search Field

A command palette opens on a shortcut, and a reader who does not know the shortcut looks for a search field. <x-wirekit::command-palette.trigger> is that field. A click on it, Enter or the Down arrow opens the palette, and so does typing: the palette opens with the text in its own field, the cursor after it.

Usage

{{-- 1. The palette, named so that the field opens this one --}}
<x-wirekit::command-palette name="search">
    <x-wirekit::command-palette.group heading="Documents">
        <x-wirekit::command-palette.item href="/invoices">Invoices</x-wirekit::command-palette.item>
        <x-wirekit::command-palette.item href="/contracts">Contracts</x-wirekit::command-palette.item>
    </x-wirekit::command-palette.group>
</x-wirekit::command-palette>

{{-- 2. The field, in the page's header; the shortcut is shown, the palette binds it --}}
<x-wirekit::command-palette.trigger for="search" shortcut="⌘K" />

Typing Before the Palette Is There

The field keeps the focus until the palette takes it, and every key typed in that moment lands in the field. Each one is handed to the palette again, which takes the text for as long as its own field does not have the focus, so a word typed in one go arrives whole, at any speed. Once the palette's field has the focus, the reader types there.

Text an input method is still composing goes when the composition ends: moving the focus in the middle of it would end it half-way. When the palette closes, the focus comes back to the field, and the field is empty again.

Naming the Palette

for names the palette to open, by its name. Without one the field opens every palette that answers an event without a name, which on a page with one palette is that one.

The shortcut is shown, not bound: shortcut="⌘K" puts a key hint at the end of the field, and the palette binds its own hotkey. Keep the two the same.

Props

The props of <x-wirekit::command-palette.trigger> are listed with the palette's own, under Props.

Accessibility

• A search field with a visually hidden label, "Search commands" by default, so the field has a name although its placeholder disappears with the first key
• aria-haspopup="dialog", so a screen reader says what pressing the field opens
• The shortcut hint is hidden from screen readers, which hear the palette's own field once it opens
• Enter and the Down arrow open the palette, and the Enter that confirms an input method's conversion is left to the input method