Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

interaction behavior

This commit is contained in:
Nate Kelley 2025-09-30 16:21:56 -06:00
parent d0ff8cc703
commit 58b57d3492
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
3 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.tsx
View File

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

13
apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx
View File

@ -49,17 +49,22 @@ export const MentionInputSuggestions = forwardRef<
//mentions //mentions
onMentionItemClick, onMentionItemClick,
mentions, mentions,
behavior = 'default',
}: MentionInputSuggestionsProps, }: MentionInputSuggestionsProps,
ref ref
) => { ) => {
const [hasClickedSelect, setHasClickedSelect] = useState(false); const [hasClickedSelect, setHasClickedSelect] = useState(false);
const [hasInteracted, setHasInteracted] = useState(behavior === 'default');
const [value, setValue] = useState(valueProp ?? defaultValue); const [value, setValue] = useState(valueProp ?? defaultValue);
const commandListNavigatedRef = useRef(false); const commandListNavigatedRef = useRef(false);
const commandRef = useRef<HTMLDivElement>(null); const commandRef = useRef<HTMLDivElement>(null);
const mentionsInputRef = useRef<MentionInputRef>(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( const onChangeInputValue: MentionInputProps['onChange'] = useCallback(
(d) => { (d) => {
@ -68,8 +73,9 @@ export const MentionInputSuggestions = forwardRef<
onChange?.(d); onChange?.(d);
commandListNavigatedRef.current = false; commandListNavigatedRef.current = false;
setHasClickedSelect(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 //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} shouldFilter={shouldFilter}
filter={filter || customFilter} filter={filter || customFilter}
onClick={() => {
setHasInteracted(true);
}}
> >
<MentionInputSuggestionsContainer className={inputContainerClassName}> <MentionInputSuggestionsContainer className={inputContainerClassName}>
<MentionInputSuggestionsMentionsInput <MentionInputSuggestionsMentionsInput

1
apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.types.ts
View File

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