diff --git a/src/components/slash-menu-list.tsx b/src/components/slash-menu-list.tsx index 3adbf459..9bf126bc 100644 --- a/src/components/slash-menu-list.tsx +++ b/src/components/slash-menu-list.tsx @@ -1,4 +1,10 @@ -import type { ComponentType, CSSProperties, Ref } from "react"; +import { + useEffect, + useRef, + type ComponentType, + type CSSProperties, + type Ref, +} from "react"; import { cn } from "@/lib/utils"; @@ -38,6 +44,17 @@ export function SlashMenuList({ /** Attach the floating element (e.g. floating-ui's `refs.setFloating`). */ ref?: Ref; }) { + const scrollRef = useRef(null); + + // Keep the active option visible when arrow keys move it past the scroll + // window. "nearest" makes this a no-op for hover-driven changes (the item + // under the pointer is already on screen), so hovering never scrolls. + useEffect(() => { + scrollRef.current + ?.querySelector('[aria-selected="true"]') + ?.scrollIntoView({ block: "nearest" }); + }, [activeIndex]); + return (
+
{items.length === 0 ? (
No commands