diff --git a/client/components/CreateDiscussion/CreateDiscussion.tsx b/client/components/CreateDiscussion/CreateDiscussion.tsx index b5f2a67ab9b..5fe9e6c12f9 100644 --- a/client/components/CreateDiscussion/CreateDiscussion.tsx +++ b/client/components/CreateDiscussion/CreateDiscussion.tsx @@ -65,14 +65,8 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug } }); - const onChangeUsers = useMutableCallback((value, action) => { - if (!action) { - if (usernames.includes(value)) { - return; - } - return handleUsernames([...usernames, value]); - } - handleUsernames(usernames.filter((current) => current !== value)); + const onChangeUsers = useMutableCallback((value: CreateDiscussionFormValues['usernames']) => { + handleUsernames(value); }); return ( diff --git a/client/components/UserAutoComplete/Avatar.js b/client/components/UserAutoComplete/Avatar.js deleted file mode 100644 index 8e135268df9..00000000000 --- a/client/components/UserAutoComplete/Avatar.js +++ /dev/null @@ -1,8 +0,0 @@ -import { Options } from '@rocket.chat/fuselage'; -import React from 'react'; - -import UserAvatar from '../avatar/UserAvatar'; - -const Avatar = ({ value, ...props }) => ; - -export default Avatar; diff --git a/client/components/UserAutoComplete/UserAutoComplete.js b/client/components/UserAutoComplete/UserAutoComplete.js index b44a350cfc8..d2c3c507b3b 100644 --- a/client/components/UserAutoComplete/UserAutoComplete.js +++ b/client/components/UserAutoComplete/UserAutoComplete.js @@ -1,10 +1,9 @@ -import { AutoComplete, Option, Box, Chip } from '@rocket.chat/fuselage'; +import { SelectFiltered, Option, Box, Chip } from '@rocket.chat/fuselage'; import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import React, { memo, useMemo, useState } from 'react'; import { useEndpointData } from '../../hooks/useEndpointData'; import UserAvatar from '../avatar/UserAvatar'; -import Avatar from './Avatar'; const query = (term = '', conditions = {}) => ({ selector: JSON.stringify({ term, conditions }) }); @@ -18,29 +17,29 @@ const UserAutoComplete = (props) => { useMemo(() => query(debouncedFilter, conditions), [filter]), ); - const options = useMemo(() => (data && data.items.map((user) => ({ value: user.username, label: user.name }))) || [], [data]); + const options = useMemo(() => (data && data.items.map((user) => [user.username, user.name])) || [], [data]); + + const renderSelected = ({ value, label }) => + value ? ( + props.onChange()} mie='x4'> + + + {label} + + + ) : null; + + const renderItem = ({ value, ...props }) =>