diff --git a/src/components/command-palette.tsx b/src/components/command-palette.tsx index 9482f287..20573eef 100644 --- a/src/components/command-palette.tsx +++ b/src/components/command-palette.tsx @@ -27,6 +27,7 @@ const CommandPalette: Component = (props) => { const [query, setQuery] = createSignal("") const [selectedIndex, setSelectedIndex] = createSignal(0) let inputRef: HTMLInputElement | undefined + let listRef: HTMLDivElement | undefined const filteredCommands = () => { const q = query().toLowerCase() @@ -84,6 +85,16 @@ const CommandPalette: Component = (props) => { } }) + createEffect(() => { + const index = selectedIndex() + if (!listRef) return + + const selectedButton = listRef.querySelector(`[data-command-index="${index}"]`) as HTMLElement + if (selectedButton) { + selectedButton.scrollIntoView({ block: "nearest", behavior: "smooth" }) + } + }) + function handleKeyDown(e: KeyboardEvent) { const filtered = filteredCommands() @@ -147,7 +158,7 @@ const CommandPalette: Component = (props) => { -
+
0} fallback={
No commands found for "{query()}"
} @@ -171,6 +182,7 @@ const CommandPalette: Component = (props) => { return (