From d9febf6c99ece01a15e5acfa27f760763581d6c7 Mon Sep 17 00:00:00 2001
From: Umang Utkarsh <umangutkarsh0024@gmail.com>
Date: Fri, 12 Jan 2024 17:40:29 +0000
Subject: [PATCH] dropdown-closing-issue-fixed

---
 .../CreateChannel/CreateChannelModal.tsx      | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx b/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx
index 2708e6e0a1e3..1caab984b9ad 100644
--- a/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx
+++ b/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx
@@ -24,7 +24,7 @@ import {
 	usePermissionWithScopedRoles,
 } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
 import { useHasLicenseModule } from '../../../../ee/client/hooks/useHasLicenseModule';
@@ -58,6 +58,7 @@ const getFederationHintKey = (licenseModule: ReturnType<typeof useHasLicenseModu
 };
 
 const CreateChannelModal = ({ teamId = '', onClose }: CreateChannelModalProps): ReactElement => {
+
 	const t = useTranslation();
 	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
 	const e2eEnabled = useSetting('E2E_Enable');
@@ -193,6 +194,25 @@ const CreateChannelModal = ({ teamId = '', onClose }: CreateChannelModalProps):
 	const broadcastId = useUniqueId();
 	const addMembersId = useUniqueId();
 
+  	const [dropdownVisible, setDropdownVisible] = useState(false);
+	const dropdownRef = useRef(null);
+
+	useEffect(() => {
+		const handleClickOutside = (e) => {
+			const { target } = e;
+
+			if (dropdownRef.current && !dropdownRef.current.contains(target)) {
+				setDropdownVisible(false);
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [setDropdownVisible]);
+
 	return (
 		<Modal
 			data-qa='create-channel-modal'
@@ -347,14 +367,18 @@ const CreateChannelModal = ({ teamId = '', onClose }: CreateChannelModalProps):
 						<FieldHint id={`${broadcastId}-hint`}>{t('Broadcast_channel_Description')}</FieldHint>
 					</Field>
 					<Field>
-						<FieldLabel htmlFor={addMembersId}>{t('Add_members')}</FieldLabel>
-						<Controller
-							control={control}
-							name='members'
-							render={({ field: { onChange, value } }): ReactElement => (
-								<UserAutoCompleteMultipleFederated id={addMembersId} value={value} onChange={onChange} />
-							)}
-						/>
+						<FieldRow>
+							<FieldLabel htmlFor={addMembersId}>{t('Add_members')}</FieldLabel>
+							<div ref={dropdownRef} onClick={() => setDropdownVisible(!dropdownVisible)}>
+								<Controller
+									control={control}
+									name='members'
+									render={({ field: { onChange, value } }): ReactElement => (
+										<UserAutoCompleteMultipleFederated id={addMembersId} value={value} onChange={onChange} />
+									)}
+								/>
+							</div>
+						</FieldRow>
 					</Field>
 				</FieldGroup>
 			</Modal.Content>