From ecac14d35dae8b20f433f052838c19d52762a35e Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Mon, 22 Nov 2021 17:45:07 -0300
Subject: [PATCH] [IMPROVE] Improve the add user drop down for add a user in
 create channel modal for UserAutoCompleteMultiple (#23766)

* Adding the new UI

* Correcting

* Adding the key

* Adding the listenners

* Lint

* Lint

* Lint

* adding a eslint-disable

* lint

* lint

Co-authored-by: Jean <45966964+Jeanstaquet@users.noreply.github.com>
Co-authored-by: Jeanstaquet <jean.staquet8@gmail.com>
---
 .../UserAutoCompleteMultiple.js                      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js b/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
index 11c383e86f8f..b34a35aed4de 100644
--- a/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
+++ b/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
@@ -4,7 +4,6 @@ import React, { memo, useMemo, useState } from 'react';
 
 import { useEndpointData } from '../../hooks/useEndpointData';
 import UserAvatar from '../avatar/UserAvatar';
-import Avatar from './Avatar';
 
 const query = (term = '') => ({ selector: JSON.stringify({ term }) });
 
@@ -40,8 +39,15 @@ const UserAutoCompleteMultiple = (props) => {
 					</Chip>
 				))
 			}
-			renderItem={({ value, ...props }) => (
-				<Option key={value} {...props} avatar={<Avatar value={value} />} />
+			renderItem={({ value, label, ...props }) => (
+				<Option key={value} {...props}>
+					<Option.Avatar>
+						<UserAvatar username={value} size='x20' />
+					</Option.Avatar>
+					<Option.Content>
+						{label} <Option.Description>({value})</Option.Description>
+					</Option.Content>
+				</Option>
 			)}
 			options={options}
 		/>