fix: close members dropdown when clicking outside in Create Channel m…

.changeset/dry-avocados-rush.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+fix: close members dropdown when clicking outside in Create Channel modal

.changeset/fix-members-dropdown-close.md

@@ -0,0 +1,4 @@
+---
+"@rocket.chat/meteor": patch
+---
+fix: Members dropdown does not close when clicking outside in Create Channel modal

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx

@@ -1,9 +1,9 @@
 import { MultiSelectFiltered } from '@rocket.chat/fuselage';
-import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedValue, useOutsideClick } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import type { ReactElement, AllHTMLAttributes } from 'react';
-import { memo, useState, useCallback, useMemo } from 'react';
+import { memo, useState, useCallback, useMemo, useRef } from 'react';
 
 import AutocompleteOptions, { OptionsContext } from './UserAutoCompleteMultipleOptions';
 import UserAvatarChip from './UserAvatarChip';
@@ -43,8 +43,6 @@ const UserAutoCompleteMultiple = ({ onChange, value, placeholder, federated, ...
 			const users = await getUsers({ selector: JSON.stringify({ term: debouncedFilter }) });
 			const options = users.items.map((item): [string, UserAutoCompleteOptionType] => [item.username, item]);
 
-			// Add extra option if filter text matches `username:server`
-			// Used to add federated users that do not exist yet
 			if (federated && matrixRegex.test(debouncedFilter)) {
 				options.unshift([debouncedFilter, { name: debouncedFilter, username: debouncedFilter, _federated: true }]);
 			}
@@ -90,35 +88,42 @@ const UserAutoCompleteMultiple = ({ onChange, value, placeholder, federated, ...
 		[onChange, setFilter, onAddUser, onRemoveUser, value],
 	);
 
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	useOutsideClick(containerRef, () => {
+		setFilter('');
+	});
+
 	return (
 		<OptionsContext.Provider value={{ options }}>
-			<MultiSelectFiltered
-				{...props}
-				placeholder={placeholder}
-				value={value}
-				onChange={handleOnChange}
-				filter={filter}
-				setFilter={setFilter}
-				renderSelected={({ value: username, onMouseDown }: { value: string; onMouseDown: () => void }) => {
-					const currentCachedOption = selectedCache[username] || {};
-
-					return (
-						<UserAvatarChip
-							mie={4}
-							mb={2}
-							key={username}
-							federated={currentCachedOption._federated}
-							name={currentCachedOption.name}
-							username={currentCachedOption.username || username}
-							onMouseDown={onMouseDown}
-						/>
-					);
-				}}
-				renderOptions={AutocompleteOptions}
-				options={options.concat(Object.entries(selectedCache)).map(([, item]) => [item.username, item.name || item.username])}
-			/>
+			<div ref={containerRef}>
+				<MultiSelectFiltered
+					{...props}
+					placeholder={placeholder}
+					value={value}
+					onChange={handleOnChange}
+					filter={filter}
+					setFilter={setFilter}
+					renderSelected={({ value: username, onMouseDown }: { value: string; onMouseDown: () => void }) => {
+						const currentCachedOption = selectedCache[username] || {};
+						return (
+							<UserAvatarChip
+								mie={4}
+								mb={2}
+								key={username}
+								federated={currentCachedOption._federated}
+								name={currentCachedOption.name}
+								username={currentCachedOption.username || username}
+								onMouseDown={onMouseDown}
+							/>
+						);
+					}}
+					renderOptions={AutocompleteOptions}
+					options={options.concat(Object.entries(selectedCache)).map(([, item]) => [item.username, item.name || item.username])}
+				/>
+			</div>
 		</OptionsContext.Provider>
 	);
 };
 
-export default memo(UserAutoCompleteMultiple);
+export default memo(UserAutoCompleteMultiple);