Skip to content

fix(slash menu): make it follow active item when navigating with arrows #269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ryuzdev wants to merge 1 commit into from
Closed

fix(slash menu): make it follow active item when navigating with arrows #269

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions src/components/slash-menu-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -38,6 +44,17 @@ export function SlashMenuList({
/** Attach the floating element (e.g. floating-ui's `refs.setFloating`). */
ref?: Ref<HTMLDivElement>;
}) {
const scrollRef = useRef<HTMLDivElement>(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 (
<div
ref={ref}
Expand All @@ -48,7 +65,7 @@ export function SlashMenuList({
{/* Scroll + fade live on an inner div with NO background, so the mask
dissolves content into the card's bg-popover (matching the Cmd+K
list), not into the darker editor background behind the card. */}
<div className="max-h-72 scroll-fade overflow-y-auto p-1">
<div ref={scrollRef} className="max-h-72 scroll-fade overflow-y-auto p-1">
{items.length === 0 ? (
<div className="px-2 py-1.5 text-sm text-muted-foreground">
No commands
Expand Down