From 5ada81129bd0a6e79c97b0a182e00ec9588ca7a5 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 30 Sep 2025 15:39:18 -0600
Subject: [PATCH] pass as ref or function

---
 .../ui/inputs/MentionInput/MentionInput.stories.tsx  | 12 ++++++++----
 .../MentionInput/createMentionSuggestionOption.tsx   |  4 ++--
 2 files changed, 10 insertions(+), 6 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 23e834762..3a934fc4c 100644
--- a/apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx
@@ -100,7 +100,8 @@ const arthurCharacters: MentionInputTriggerItem[] = [
 
 const looneyTunesSuggestions = createMentionSuggestionExtension({
   trigger: '@',
-  items: looneyTunesCharacters,
+  items: ({ defaultQueryMentionsFilter, query }) =>
+    defaultQueryMentionsFilter(query, looneyTunesCharacters),
   popoverContent: (props) => {
     return <div className="p-2">Hello {props.value}</div>;
   },
@@ -158,7 +159,8 @@ const theSimpsonsCharacters: MentionInputTriggerItem[] = [
 
 const theSimpsonsSuggestions = createMentionSuggestionExtension({
   trigger: '#',
-  items: theSimpsonsCharacters,
+  items: ({ defaultQueryMentionsFilter, query }) =>
+    defaultQueryMentionsFilter(query, theSimpsonsCharacters),
   pillStyling: {
     className: () => {
       return 'bg-blue-100 border-blue-300 text-blue-500 hover:bg-blue-200';
@@ -171,7 +173,8 @@ const theSimpsonsSuggestions = createMentionSuggestionExtension({
 
 const arthurSuggestions = createMentionSuggestionExtension({
   trigger: '$',
-  items: arthurCharacters,
+  items: ({ defaultQueryMentionsFilter, query }) =>
+    defaultQueryMentionsFilter(query, arthurCharacters),
   pillStyling: {
     className: () => {
       return 'bg-green-100 border-green-300 text-green-500 hover:bg-green-200';
@@ -284,7 +287,8 @@ const manyCharacters: MentionInputTriggerItem[] = [
 
 const spongebobSuggestions = createMentionSuggestionExtension({
   trigger: '%',
-  items: manyCharacters,
+  items: ({ defaultQueryMentionsFilter, query }) =>
+    defaultQueryMentionsFilter(query, manyCharacters),
   pillStyling: {
     className: () => {
       return 'bg-yellow-100 border-yellow-300 text-yellow-500 hover:bg-yellow-200';
diff --git a/apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx b/apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx
index 2a9bd0ebb..8bd1b5c0b 100644
--- a/apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx
@@ -21,7 +21,7 @@ export const createMentionSuggestionExtension = ({
 }: {
   trigger: string;
   items:
-    | MentionInputTriggerItem[]
+    | React.RefObject<MentionInputTriggerItem[]>
     | ((props: {
         query: string;
         defaultQueryMentionsFilter: typeof defaultQueryMentionsFilter;
@@ -37,7 +37,7 @@ export const createMentionSuggestionExtension = ({
       ? (props) => {
           return items({ ...props, defaultQueryMentionsFilter });
         }
-      : ({ query }) => defaultQueryMentionsFilter(query, items),
+      : ({ query }) => defaultQueryMentionsFilter(query, items.current),
   render: () => {
     let component: ReactRenderer<MentionListImperativeHandle, MentionListProps<string>>;