interaction behavior

apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx

@@ -132,6 +132,7 @@ export const BusterChatInputBase: React.FC<BusterChatInputProps> = React.memo(
           ref={mentionInputSuggestionsRef}
           inputContainerClassName="px-5 pt-4"
           inputClassName="text-md"
+          behavior="open-on-focus"
         >
           <BusterChatInputButtons
             onSubmit={onSubmitPreflight}

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx

@@ -49,17 +49,22 @@ export const MentionInputSuggestions = forwardRef<
       //mentions
       onMentionItemClick,
       mentions,
+      behavior = 'default',
     }: MentionInputSuggestionsProps,
     ref
   ) => {
     const [hasClickedSelect, setHasClickedSelect] = useState(false);
+    const [hasInteracted, setHasInteracted] = useState(behavior === 'default');
     const [value, setValue] = useState(valueProp ?? defaultValue);
 
     const commandListNavigatedRef = useRef(false);
     const commandRef = useRef<HTMLDivElement>(null);
     const mentionsInputRef = useRef<MentionInputRef>(null);
 
-    const showSuggestionList = !hasClickedSelect && suggestionItems.length > 0;
+    const showSuggestionList =
+      behavior === 'default'
+        ? !hasClickedSelect && suggestionItems.length > 0
+        : hasInteracted && suggestionItems.length > 0;
 
     const onChangeInputValue: MentionInputProps['onChange'] = useCallback(
       (d) => {
@@ -68,8 +73,9 @@ export const MentionInputSuggestions = forwardRef<
         onChange?.(d);
         commandListNavigatedRef.current = false;
         setHasClickedSelect(false);
+        setHasInteracted(true);
       },
-      [onChange, setHasClickedSelect]
+      [onChange, setHasClickedSelect, setHasInteracted]
     );
 
     //Exported: this is used to change the value of the input from outside the component
@@ -183,6 +189,9 @@ export const MentionInputSuggestions = forwardRef<
           )}
           shouldFilter={shouldFilter}
           filter={filter || customFilter}
+          onClick={() => {
+            setHasInteracted(true);
+          }}
         >
           <MentionInputSuggestionsContainer className={inputContainerClassName}>
             <MentionInputSuggestionsMentionsInput

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.types.ts

@@ -86,6 +86,7 @@ export type MentionInputSuggestionsProps<T = string> = {
   inputContainerClassName?: string;
   suggestionsContainerClassName?: string;
   inputClassName?: string;
+  behavior?: 'default' | 'open-on-focus';
 } & Pick<React.ComponentProps<typeof Command>, 'filter' | 'shouldFilter'>;
 
 export type MentionInputSuggestionsRef = {