fix: Modal backdrop overlapping Select options (#32640)

.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

apps/meteor/client/components/GenericMenu/GenericMenu.tsx

@@ -11,6 +11,7 @@ type GenericMenuCommonProps = {
 	title: string;
 	icon?: ComponentProps<typeof IconButton>['icon'];
 	disabled?: boolean;
+	callbackAction?: () => void;
 };
 type GenericMenuConditionalProps =
 	| {
@@ -28,7 +29,7 @@ type GenericMenuConditionalProps =
 
 type GenericMenuProps = GenericMenuCommonProps & GenericMenuConditionalProps & Omit<ComponentProps<typeof MenuV2>, '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[]) =>

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?.();
 		}
 	});
 };

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'

apps/meteor/client/views/room/UserCard/UserCardWithData.tsx

@@ -69,8 +69,17 @@ const UserCardWithData = ({ username, rid, onOpenUserInfo, onClose }: UserCardWi
 			return null;
 		}
 
-		return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuOptions} placement='bottom-start' />;
-	}, [menuOptions, t]);
+		return (
+			<GenericMenu
+				title={t('More')}
+				key='menu'
+				data-qa-id='menu'
+				sections={menuOptions}
+				placement='bottom-start'
+				callbackAction={onClose}
+			/>
+		);
+	}, [menuOptions, onClose, t]);
 
 	const actions = useMemo(() => {
 		const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => (