fix(web): auto-scroll composer autocomplete list on keyboard navigation

[kerdofficial]

What Changed

Added scrollIntoView({ block: "nearest" }) to the active item in the composer @-mention autocomplete dropdown when navigating with arrow keys.

Single file changed: ComposerCommandMenu.tsx (+9 lines).

Why

When the autocomplete list has more items than fit in the visible area (max-h-64), pressing ArrowDown/ArrowUp updates the highlighted item but does not scroll the list. The selected item moves off-screen while the viewport stays fixed, making keyboard navigation unusable for items below the fold.

The keyboard navigation is handled manually via nudgeComposerMenuHighlight in ChatView.tsx (not through base-ui's built-in keyboard handling), so base-ui's auto-scroll never fires. This fix adds an explicit scrollIntoView call on the active item.

UI Changes

Before

before.mp4

After

after.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Note

Auto-scroll active item in composer autocomplete list on keyboard navigation

When navigating the composer command menu with the keyboard, the active item now calls scrollIntoView to stay visible within the scrollable container. This is implemented in ComposerCommandMenuItem via a useEffect that triggers whenever isActive becomes true.

^{Macroscope summarized 2db97dd.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 155ff351-fa66-4cc0-9f9d-cab810574b81

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}