From eb28c97532e704f2c1e731aed9480572d948b18b Mon Sep 17 00:00:00 2001 From: Pavani12314 Date: Sat, 14 Mar 2026 18:00:26 +0000 Subject: [PATCH 1/5] fix: close members dropdown when clicking outside in Create Channel modal --- .../UserAutoCompleteMultiple.tsx | 69 +++++++++++-------- 1 file changed, 40 insertions(+), 29 deletions(-) diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx index 413cab7f6ea0c..74afea7949a73 100644 --- a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx +++ b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx @@ -3,7 +3,7 @@ import { useDebouncedValue } 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, useEffect } 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,48 @@ const UserAutoCompleteMultiple = ({ onChange, value, placeholder, federated, ... [onChange, setFilter, onAddUser, onRemoveUser, value], ); + const containerRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (containerRef.current && !containerRef.current.contains(event.target as Node)) { + setFilter(''); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, [setFilter]); + return ( - void }) => { - const currentCachedOption = selectedCache[username] || {}; - - return ( - - ); - }} - renderOptions={AutocompleteOptions} - options={options.concat(Object.entries(selectedCache)).map(([, item]) => [item.username, item.name || item.username])} - /> +
+ void }) => { + const currentCachedOption = selectedCache[username] || {}; + return ( + + ); + }} + renderOptions={AutocompleteOptions} + options={options.concat(Object.entries(selectedCache)).map(([, item]) => [item.username, item.name || item.username])} + /> +
); }; -export default memo(UserAutoCompleteMultiple); +export default memo(UserAutoCompleteMultiple); \ No newline at end of file From 6d6d81b49d023b4c43854a43e1fbc5f60190ec54 Mon Sep 17 00:00:00 2001 From: Pavani12314 Date: Sat, 14 Mar 2026 23:43:11 +0530 Subject: [PATCH 2/5] fix: use useOutsideClick hook instead of manual event listener Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../UserAutoCompleteMultiple.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx index 74afea7949a73..09fea0a89c6fc 100644 --- a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx +++ b/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, useRef, useEffect } from 'react'; +import { memo, useState, useCallback, useMemo, useRef } from 'react'; import AutocompleteOptions, { OptionsContext } from './UserAutoCompleteMultipleOptions'; import UserAvatarChip from './UserAvatarChip'; @@ -90,15 +90,9 @@ const UserAutoCompleteMultiple = ({ onChange, value, placeholder, federated, ... const containerRef = useRef(null); - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (containerRef.current && !containerRef.current.contains(event.target as Node)) { - setFilter(''); - } - }; - document.addEventListener('mousedown', handleClickOutside); - return () => document.removeEventListener('mousedown', handleClickOutside); - }, [setFilter]); + useOutsideClick(containerRef, () => { + setFilter(''); + }); return ( From 679b26a5597c598961f3f81233857f405dbac169 Mon Sep 17 00:00:00 2001 From: Pavani12314 Date: Sat, 14 Mar 2026 18:18:34 +0000 Subject: [PATCH 3/5] chore: add changeset --- .changeset/dry-avocados-rush.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dry-avocados-rush.md diff --git a/.changeset/dry-avocados-rush.md b/.changeset/dry-avocados-rush.md new file mode 100644 index 0000000000000..c5679cdabcf47 --- /dev/null +++ b/.changeset/dry-avocados-rush.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +fix: close members dropdown when clicking outside in Create Channel modal From 64d2d24a83380073b969fb9f9da83f9849773bdc Mon Sep 17 00:00:00 2001 From: Pavani12314 Date: Sun, 15 Mar 2026 20:04:15 +0000 Subject: [PATCH 4/5] chore: add changeset for members dropdown fix --- .changeset/fix-members-dropdown-close.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 .changeset/fix-members-dropdown-close.md diff --git a/.changeset/fix-members-dropdown-close.md b/.changeset/fix-members-dropdown-close.md new file mode 100644 index 0000000000000..81d47ea8cdaf2 --- /dev/null +++ b/.changeset/fix-members-dropdown-close.md @@ -0,0 +1 @@ +fix: Members dropdown does not close when clicking outside in Create Channel modal From d2116cfc24633ded1f9aabe15d5fd4a63fa208a7 Mon Sep 17 00:00:00 2001 From: Pavani12314 Date: Sun, 15 Mar 2026 20:06:24 +0000 Subject: [PATCH 5/5] chore: fix changeset format --- .changeset/fix-members-dropdown-close.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.changeset/fix-members-dropdown-close.md b/.changeset/fix-members-dropdown-close.md index 81d47ea8cdaf2..31865d46c1167 100644 --- a/.changeset/fix-members-dropdown-close.md +++ b/.changeset/fix-members-dropdown-close.md @@ -1 +1,4 @@ +--- +"@rocket.chat/meteor": patch +--- fix: Members dropdown does not close when clicking outside in Create Channel modal