From 2db97dd8e53f9900654ee778cee6b12d1ede6234 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kerekes=20D=C3=A1niel?= <kerekes.daniel.23@icloud.com>
Date: Tue, 24 Mar 2026 01:38:39 +0100
Subject: [PATCH] fix(web): auto-scroll composer autocomplete list on keyboard
 navigation

---
 apps/web/src/components/chat/ComposerCommandMenu.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 818c3c20f8..c258464d31 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -1,5 +1,5 @@
 import { type ProjectEntry, type ModelSlug, type ProviderKind } from "@t3tools/contracts";
-import { memo } from "react";
+import { memo, useEffect, useRef } from "react";
 import { type ComposerSlashCommand, type ComposerTriggerKind } from "../../composer-logic";
 import { BotIcon } from "lucide-react";
 import { cn } from "~/lib/utils";
@@ -82,8 +82,17 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
   isActive: boolean;
   onSelect: (item: ComposerCommandItem) => void;
 }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (props.isActive) {
+      ref.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [props.isActive]);
+
   return (
     <CommandItem
+      ref={ref}
       value={props.item.id}
       className={cn(
         "cursor-pointer select-none gap-2",