From db7d623b9a7772bb6f8c1486c4a425e939eb1f3f Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 1 Oct 2025 13:35:51 -0600
Subject: [PATCH] interacting should fall out

---
 .../MentionInputSuggestions.tsx                | 18 ++++++++++--------
 .../MentionInputSuggestionsList.tsx            |  2 +-
 .../MentionInputSuggestionsMentionsInput.tsx   |  2 ++
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
index 3305da1a7..9d33a67fa 100644
--- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
@@ -54,7 +54,7 @@ export const MentionInputSuggestions = forwardRef<
     ref
   ) => {
     const [hasClickedSelect, setHasClickedSelect] = useState(false);
-    const [hasInteracted, setHasInteracted] = useState(behavior === 'default');
+    const [isInteracting, setIsInteracting] = useState(behavior === 'default');
     const [value, setValue] = useState(valueProp ?? defaultValue);
 
     const commandListNavigatedRef = useRef(false);
@@ -64,7 +64,7 @@ export const MentionInputSuggestions = forwardRef<
     const showSuggestionList =
       behavior === 'default'
         ? !hasClickedSelect && suggestionItems.length > 0
-        : hasInteracted && suggestionItems.length > 0;
+        : isInteracting && suggestionItems.length > 0;
 
     const onChangeInputValue: MentionInputProps['onChange'] = useCallback(
       (d) => {
@@ -73,9 +73,9 @@ export const MentionInputSuggestions = forwardRef<
         onChange?.(d);
         commandListNavigatedRef.current = false;
         setHasClickedSelect(false);
-        setHasInteracted(true);
+        setIsInteracting(true);
       },
-      [onChange, setHasClickedSelect, setHasInteracted]
+      [onChange, setHasClickedSelect, setIsInteracting]
     );
 
     //Exported: this is used to change the value of the input from outside the component
@@ -124,6 +124,10 @@ export const MentionInputSuggestions = forwardRef<
     const addMentionToInput = mentionsInputRef.current?.addMentionToInput!;
     const mounted = useMounted();
 
+    const onBlur = useMemoizedFn(() => {
+      setIsInteracting(false);
+    });
+
     // Track arrow key navigation in the command list
     useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
@@ -189,9 +193,6 @@ export const MentionInputSuggestions = forwardRef<
           )}
           shouldFilter={shouldFilter}
           filter={filter || customFilter}
-          onClick={() => {
-            setHasInteracted(true);
-          }}
         >
           <MentionInputSuggestionsContainer className={inputContainerClassName}>
             <MentionInputSuggestionsMentionsInput
@@ -208,13 +209,14 @@ export const MentionInputSuggestions = forwardRef<
               commandListNavigatedRef={commandListNavigatedRef}
               disabled={disabled}
               className={inputClassName}
+              onBlur={onBlur}
             />
             {children && <div className="mt-4.5">{children}</div>}
           </MentionInputSuggestionsContainer>
           <SuggestionsSeperator />
           <MentionInputSuggestionsList
             show={showSuggestionList}
-            className={cn('pt-1.5 overflow-y-auto max-h-[35vh]', suggestionsContainerClassName)}
+            className={cn('px-3 overflow-y-auto max-h-[35vh]', suggestionsContainerClassName)}
           >
             <MentionInputSuggestionsItemsSelector
               suggestionItems={suggestionItems}
diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsList.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsList.tsx
index 8f9d4dcdd..87be20d6e 100644
--- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsList.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsList.tsx
@@ -20,7 +20,7 @@ export const MentionInputSuggestionsList = ({
   if (!show) return null;
 
   return (
-    <Command.List className={cn('px-3', hasResults && 'pb-1.5', className)} style={style}>
+    <Command.List className={cn(hasResults && 'py-1.5', className)} style={style}>
       {children}
     </Command.List>
   );
diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx
index 5208d6e2c..d43365c84 100644
--- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx
@@ -10,6 +10,8 @@ export type MentionInputSuggestionsMentionsInputProps = Pick<
 > & {
   onChange: MentionInputProps['onChange'];
   onPressEnter: MentionInputProps['onPressEnter'];
+  onBlur?: MentionInputProps['onBlur'];
+  onFocus?: MentionInputProps['onFocus'];
   className?: string;
   style?: React.CSSProperties;
   autoFocus?: boolean;