interacting should fall out

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}

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>
   );

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;