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 diff --git a/.changeset/fix-members-dropdown-close.md b/.changeset/fix-members-dropdown-close.md new file mode 100644 index 0000000000000..31865d46c1167 --- /dev/null +++ b/.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 diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx index 413cab7f6ea0c..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 } 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(null); + + useOutsideClick(containerRef, () => { + 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