diff --git a/.changeset/heavy-dolphins-lie.md b/.changeset/heavy-dolphins-lie.md new file mode 100644 index 00000000000..aac6d0bc8e8 --- /dev/null +++ b/.changeset/heavy-dolphins-lie.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Fixes the issue where the modal backdrop is overlapping the options of the `Select` component diff --git a/apps/meteor/client/components/GenericMenu/GenericMenu.tsx b/apps/meteor/client/components/GenericMenu/GenericMenu.tsx index ddde6122b99..294a9877052 100644 --- a/apps/meteor/client/components/GenericMenu/GenericMenu.tsx +++ b/apps/meteor/client/components/GenericMenu/GenericMenu.tsx @@ -11,6 +11,7 @@ type GenericMenuCommonProps = { title: string; icon?: ComponentProps['icon']; disabled?: boolean; + callbackAction?: () => void; }; type GenericMenuConditionalProps = | { @@ -28,7 +29,7 @@ type GenericMenuConditionalProps = type GenericMenuProps = GenericMenuCommonProps & GenericMenuConditionalProps & Omit, 'children'>; -const GenericMenu = ({ title, icon = 'menu', disabled, onAction, ...props }: GenericMenuProps) => { +const GenericMenu = ({ title, icon = 'menu', disabled, onAction, callbackAction, ...props }: GenericMenuProps) => { const t = useTranslation(); const sections = 'sections' in props && props.sections; @@ -37,7 +38,7 @@ const GenericMenu = ({ title, icon = 'menu', disabled, onAction, ...props }: Gen const itemsList = sections ? sections.reduce((acc, { items }) => [...acc, ...items], [] as GenericMenuItemProps[]) : items || []; const disabledKeys = itemsList.filter(({ disabled }) => disabled).map(({ id }) => id); - const handleAction = useHandleMenuAction(itemsList || []); + const handleAction = useHandleMenuAction(itemsList || [], callbackAction); const hasIcon = itemsList.some(({ icon }) => icon); const handleItems = (items: GenericMenuItemProps[]) => diff --git a/apps/meteor/client/components/GenericMenu/hooks/useHandleMenuAction.tsx b/apps/meteor/client/components/GenericMenu/hooks/useHandleMenuAction.tsx index c67c8acd3c5..dd111576519 100644 --- a/apps/meteor/client/components/GenericMenu/hooks/useHandleMenuAction.tsx +++ b/apps/meteor/client/components/GenericMenu/hooks/useHandleMenuAction.tsx @@ -1,13 +1,13 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { GenericMenuItemProps } from '../GenericMenuItem'; -export const useHandleMenuAction = (items: GenericMenuItemProps[], close?: () => void) => { - return useMutableCallback((id) => { +export const useHandleMenuAction = (items: GenericMenuItemProps[], callbackAction?: () => void) => { + return useEffectEvent((id) => { const item = items.find((item) => item.id === id && !!item.onClick); if (item) { item.onClick?.(); - close?.(); + callbackAction?.(); } }); }; diff --git a/apps/meteor/client/components/ModalBackdrop.tsx b/apps/meteor/client/components/ModalBackdrop.tsx index 18d930f9b1c..e1e69649618 100644 --- a/apps/meteor/client/components/ModalBackdrop.tsx +++ b/apps/meteor/client/components/ModalBackdrop.tsx @@ -90,7 +90,7 @@ const ModalBackdrop = ({ children, onDismiss }: ModalBackdropProps): ReactElemen children={children} className='rcx-modal__backdrop' position='fixed' - zIndex={999999} + zIndex={9999} inset={0} display='flex' flexDirection='column' diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx index 40244b04beb..da9f9bb1903 100644 --- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx +++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx @@ -69,8 +69,17 @@ const UserCardWithData = ({ username, rid, onOpenUserInfo, onClose }: UserCardWi return null; } - return ; - }, [menuOptions, t]); + return ( + + ); + }, [menuOptions, onClose, t]); const actions = useMemo(() => { const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => (