@@ -14,7 +14,6 @@ import type { Organization } from "api/typesGenerated";
1414import { Avatar } from "components/Avatar/Avatar" ;
1515import { AvatarData } from "components/AvatarData/AvatarData" ;
1616import { useDebouncedFunction } from "hooks/debounce" ;
17- // import { prepareQuery } from "utils/filters";
1817
1918export type OrganizationAutocompleteProps = {
2019value :Organization | null ;
@@ -38,14 +37,6 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
3837value :value ?. name ?? "" ,
3938open :false ,
4039} ) ;
41- // const usersQuery = useQuery({
42- // ...users({
43- // q: prepareQuery(encodeURI(autoComplete.value)),
44- // limit: 25,
45- // }),
46- // enabled: autoComplete.open,
47- // keepPreviousData: true,
48- // });
4940const organizationsQuery = useQuery ( organizations ( ) ) ;
5041
5142const { debounced :debouncedInputOnChange } = useDebouncedFunction (
@@ -60,10 +51,8 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
6051
6152return (
6253< Autocomplete
63- // Since the values are filtered by the API we don't need to filter them
64- // in the FE because it can causes some mismatches.
6554filterOptions = { ( organization ) => organization }
66- noOptionsText = "Nousers found"
55+ noOptionsText = "Noorganizations found"
6756className = { className }
6857options = { organizationsQuery . data ?? [ ] }
6958loading = { organizationsQuery . isLoading }
@@ -88,14 +77,14 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
8877isOptionEqualToValue = { ( option :Organization , value :Organization ) =>
8978option . name === value . name
9079}
91- getOptionLabel = { ( option ) => option . name }
80+ getOptionLabel = { ( option ) => option . display_name }
9281renderOption = { ( props , option ) => {
9382const { key, ...optionProps } = props ;
9483return (
9584< li key = { key } { ...optionProps } >
9685< AvatarData
97- title = { option . name }
98- subtitle = { option . display_name }
86+ title = { option . display_name }
87+ subtitle = { option . name }
9988src = { option . icon }
10089/>
10190</ li >
@@ -107,12 +96,14 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
10796fullWidth
10897size = { size }
10998label = { label }
99+ autoFocus
110100placeholder = "Organization name"
111101css = { {
112102"&:not(:has(label))" :{
113103margin :0 ,
114104} ,
115105} }
106+ required
116107InputProps = { {
117108 ...params . InputProps ,
118109onChange :debouncedInputOnChange ,