From 0c576b62e6e1f359de7fff75f6a248e05f705b8b Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Sat, 27 Sep 2025 23:31:32 -0600
Subject: [PATCH] select scroll into view

---
 .../MentionInput/MentionInput.stories.tsx       | 17 ++++++++++-------
 .../MentionList/MentionListItem.tsx             | 16 ++++++++++++----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx b/apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx
index b15ab0a96..f4e30489a 100644
--- a/apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx
@@ -142,7 +142,7 @@ export const looneyTunesSuggestions = createMentionSuggestionExtension({
   trigger: '@',
   items: looneyTunesCharacters,
   popoverContent: (props) => {
-    return <div>Hello {props.value}</div>;
+    return <div className="p-2">Hello {props.value}</div>;
   },
   pillStyling: {
     className: () => {
@@ -163,7 +163,7 @@ const theSimpsonsSuggestions = createMentionSuggestionExtension({
     },
   },
   popoverContent: (props) => {
-    return <div>Howdy {props.value}</div>;
+    return <div className="p-2">Howdy {props.value}</div>;
   },
 });
 
@@ -176,11 +176,11 @@ const arthurSuggestions = createMentionSuggestionExtension({
     },
   },
   popoverContent: (props) => {
-    return <div>Ciao {props.value}</div>;
+    return <div className="p-2">Ciao {props.value}</div>;
   },
 });
 
-const spongebobCharacters: MentionInputTriggerItem[] = [
+const manyCharacters: MentionInputTriggerItem[] = [
   {
     type: 'group',
     items: [
@@ -265,8 +265,8 @@ const spongebobCharacters: MentionInputTriggerItem[] = [
         label: 'Scooby-Doo',
       },
       {
-        value: 'Shaggy',
-        label: 'Shaggy',
+        value: 'Shaggy-Doo',
+        label: 'Shaggy-Doo',
       },
       {
         value: 'Velma',
@@ -282,12 +282,15 @@ const spongebobCharacters: MentionInputTriggerItem[] = [
 
 const spongebobSuggestions = createMentionSuggestionExtension({
   trigger: '%',
-  items: spongebobCharacters,
+  items: manyCharacters,
   pillStyling: {
     className: () => {
       return 'bg-yellow-100 border-yellow-300 text-yellow-500 hover:bg-yellow-200';
     },
   },
+  popoverContent: (props) => {
+    return <div className="p-5 bg-red-100">This is a custom popover content for {props.value}</div>;
+  },
 });
 
 export const Default: Story = {
diff --git a/apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListItem.tsx b/apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListItem.tsx
index b012f0876..66bc8fa45 100644
--- a/apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListItem.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListItem.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react';
 import { Text } from '@/components/ui/typography/Text';
-import { useInViewport } from '@/hooks/useInViewport';
 import { cn } from '@/lib/utils';
 import { useMentionListRef } from './MentionList';
 import type { MentionTriggerItemExtended } from './MentionListSelector';
@@ -12,17 +11,26 @@ export function MentionListItem<T = string>({
   icon,
   loading,
   disabled,
-  setSelectedItem,
   onSelectItem,
   secondaryContent,
-}: MentionTriggerItemExtended<T>) {
+}: Omit<MentionTriggerItemExtended<T>, 'setSelectedItem'>) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useMentionListRef();
+
+  useEffect(() => {
+    if (isSelected && containerRef.current && listRef?.current) {
+      containerRef.current.scrollIntoView({
+        behavior: 'instant',
+        block: 'nearest',
+        inline: 'nearest',
+      });
+    }
+  }, [isSelected, listRef]);
 
   return (
     <div
       ref={containerRef}
       onClick={() => onSelectItem(value)}
-      onMouseEnter={() => setSelectedItem(value)}
       data-testid={`mention-list-item-${value}`}
       data-disabled={disabled}
       data-loading={loading}