select scroll into view

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 = {

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}