regression: Unable to add users while creating a team (#21354)

Co-authored-by: Douglas Fabris <[email protected]>
Co-authored-by: Tasso Evangelista <[email protected]>

client/views/teams/modals/CreateTeamModal/UsersInput.tsx

@@ -10,27 +10,33 @@ type UsersInputProps = {
 	onChange: (value: unknown, action: 'remove' | undefined) => void;
 };
 
-const useUsersAutoComplete = (term: string): AutoCompleteProps['options'] => {
+type AutocompleteData = [AutoCompleteProps['options'], { [key: string]: string | undefined }];
+
+const useUsersAutoComplete = (term: string): AutocompleteData => {
 	const params = useMemo(() => ({
 		selector: JSON.stringify({ term }),
 	}), [term]);
 	const { value: data } = useEndpointData('users.autocomplete', params);
 
-	return useMemo<AutoCompleteProps['options']>(() => {
+	return useMemo<AutocompleteData>(() => {
 		if (!data) {
-			return [];
+			return [[], {}];
 		}
 
-		return data.items.map((user) => ({
+		const options = data.items.map((user) => ({
 			label: user.name ?? '',
-			value: user.username ?? '',
+			value: user._id ?? '',
 		})) || [];
+
+		const labelData = Object.fromEntries(data.items.map((user) => [user._id, user.username]) || []);
+
+		return [options, labelData];
 	}, [data]);
 };
 
 const UsersInput: FC<UsersInputProps> = ({ onChange, ...props }) => {
 	const [filter, setFilter] = useState('');
-	const options = useUsersAutoComplete(useDebouncedValue(filter, 1000));
+	const [options, labelData] = useUsersAutoComplete(useDebouncedValue(filter, 1000));
 
 	const onClickSelected = useCallback((e) => {
 		e.stopPropagation();
@@ -41,17 +47,17 @@ const UsersInput: FC<UsersInputProps> = ({ onChange, ...props }) => {
 	const renderSelected = useCallback<FC<{ value?: string[] }>>(
 		({ value: selected }) => <>
 			{selected?.map((value) => <Chip key={value} {...props} height='x20' value={value} onClick={onClickSelected} mie='x4'>
-				<UserAvatar size='x20' username={value} />
-				<Box is='span' margin='none' mis='x4'>{value}</Box>
+				<UserAvatar size='x20' username={labelData[value] as string} />
+				<Box is='span' margin='none' mis='x4'>{labelData[value]}</Box>
 			</Chip>)}
 		</>,
-		[onClickSelected, props],
+		[onClickSelected, props, labelData],
 	);
 
 	const renderItem = useCallback<FC<{ value: string }>>(
 		({ value, ...props }) =>
-			<Option key={value} {...props} avatar={<UserAvatar size={Options.AvatarSize} username={value} />} />,
-		[],
+			<Option key={value} {...props} avatar={<UserAvatar size={Options.AvatarSize} username={labelData[value] as string} />} />,
+		[labelData],
 	);
 
 	return <AutoComplete