diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx index a82174ac25d..626e0cca10f 100644 --- a/src/components/Common/UserAutocompleteFormField.tsx +++ b/src/components/Common/UserAutocompleteFormField.tsx @@ -81,6 +81,7 @@ export default function UserAutocomplete(props: UserSearchProps) { optionLabel={formatName} optionIcon={userOnlineDot} optionImage={(option) => option.read_profile_picture_url} + avatar optionDescription={(option) => `${option.user_type} - ${option.username}` } diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx index 9c9537a7901..e7f53988fce 100644 --- a/src/components/Form/FormFields/Autocomplete.tsx +++ b/src/components/Form/FormFields/Autocomplete.tsx @@ -87,6 +87,7 @@ type AutocompleteProps<T, V = T> = { isLoading?: boolean; allowRawInput?: boolean; error?: string; + avatar?: boolean; } & ( | { required?: false; @@ -244,11 +245,13 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => { <div className="flex items-center"> <div className="flex flex-col"> <div className="relative"> - <Avatar - className="mr-2 h-11 w-11 rounded-full" - name={option.label} - imageUrl={option.image} - /> + {(option.image || props.avatar) && ( + <Avatar + className="mr-2 h-11 w-11 rounded-full" + name={option.label} + imageUrl={option.image} + /> + )} <span className="absolute bottom-0 right-0 z-10"> {option.icon} </span>