[ @sdxc/ui/mixins ]

commandKeys

Arrow-key and Enter navigation for a Command root already paired with commandFilter(model).

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { commandKeys } from "@sdxc/ui/mixins";

Usage

Adds ArrowDown/ArrowUp/Enter navigation to a Command root already paired with commandFilter(model), mirroring the active match onto aria-selected and aria-activedescendant, and activating it on Enter.

Signature

commandKeys(model: FilterModel): MixinDescriptor<HTMLElement>

Parameters

Parameter	Type	Description
`model`	`FilterModel`	The same `FilterModel` instance passed to `commandFilter()`.

Examples

let model = new FilterModel();
<Command mix={[commandFilter(model), commandKeys(model)]}>
	<Command.Input />
	<Command.Item id="home" value="Home">
		<a href="/">Home</a>
	</Command.Item>
	<Command.Item id="settings" value="Settings">
		<a href="/settings">Settings</a>
	</Command.Item>
	<Command.Empty>No matches</Command.Empty>
</Command>