[FIX][ENTERPRISE] Auditing RoomAutocomplete

ee/client/audit/RoomAutoComplete.js

@@ -4,16 +4,16 @@ import { AutoComplete, Option, Options } from '@rocket.chat/fuselage';
 import RoomAvatar from '../../../client/components/avatar/RoomAvatar';
 import { useEndpointData } from '../../../client/hooks/useEndpointData';
 
-const query = (term = '') => ({ selector: JSON.stringify({ term }) });
+const query = (name = '') => ({ selector: JSON.stringify({ name }) });
 
 const Avatar = ({ value, type, avatarETag, ...props }) => <RoomAvatar size={Options.AvatarSize} room={{ type, _id: value, avatarETag }} {...props} />;
 
 const RoomAutoComplete = React.memo((props) => {
 	const [filter, setFilter] = useState('');
 	const { value: data } = useEndpointData('rooms.autocomplete.channelAndPrivate', useMemo(() => query(filter), [filter]));
-	const options = useMemo(() => (data && data.items.map(({ name, _id, avatarETag, t }) => ({
+	const options = useMemo(() => (data && data.items.map(({ name, _id, fname, avatarETag, t }) => ({
 		value: _id,
-		label: { name, avatarETag, type: t },
+		label: { name: fname || name, avatarETag, type: t },
 	}))) || [], [data]);
 
 	return <AutoComplete
@@ -23,7 +23,7 @@ const RoomAutoComplete = React.memo((props) => {
 		renderSelected={({
 			value,
 			label,
-		}) => <><RoomAvatar size='x20' room={{ _id: value, ...label }} /> {label?.name}</>}
+		}) => <Option label={label.name} avatar={<Avatar value={value} room={{ _id: value, ...label }} />} />}
 		renderItem={({ value, label, ...props }) => <Option key={value} {...props} label={label.name} avatar={<Avatar value={value} {...label} />} />}
 		options={ options }
 	/>;