Change modal dismissing strategy

apps/meteor/client/components/GenericModal/GenericModal.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { RequiredModalProps } from './withDoNotAskAgain';
 import { withDoNotAskAgain } from './withDoNotAskAgain';
+import { modalStore } from '../../providers/ModalProvider/ModalStore';
 
 type VariantType = 'danger' | 'warning' | 'info' | 'success';
 
@@ -97,13 +98,20 @@ const GenericModal = ({
 		onClose?.();
 	});
 
-	useEffect(
-		() => () => {
+	const handleDismiss = useEffectEvent(() => {
+		dismissedRef.current = true;
+		onDismiss?.();
+	});
+
+	useEffect(() => {
+		const thisModal = modalStore.current;
+
+		return () => {
+			if (thisModal === modalStore.current) return;
 			if (!dismissedRef.current) return;
-			onDismiss?.();
-		},
-		[onDismiss],
-	);
+			handleDismiss();
+		};
+	}, [handleDismiss]);
 
 	return (
 		<Modal aria-labelledby={`${genericModalId}-title`} wrapperFunction={wrapperFunction} {...props}>

apps/meteor/client/lib/imperativeModal.tsx

@@ -1,5 +1,5 @@
 import { Emitter } from '@rocket.chat/emitter';
-import { Suspense, createElement } from 'react';
+import { createElement } from 'react';
 import type { ComponentProps, ComponentType, ReactNode } from 'react';
 
 import { modalStore } from '../providers/ModalProvider/ModalStore';
@@ -22,14 +22,10 @@ const mapCurrentModal = (descriptor: ModalDescriptor): ReactNode => {
 	}
 
 	if ('component' in descriptor) {
-		return (
-			<Suspense fallback={<div />}>
-				{createElement(descriptor.component, {
-					key: Math.random(),
-					...descriptor.props,
-				})}
-			</Suspense>
-		);
+		return createElement(descriptor.component, {
+			key: Math.random(),
+			...descriptor.props,
+		});
 	}
 };
 

apps/meteor/client/views/modal/ModalRegion.tsx

@@ -1,12 +1,12 @@
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useCurrentModal, useModal } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 
 import ModalBackdrop from '../../components/ModalBackdrop';
 import ModalPortal from '../../portals/ModalPortal';
 
-const FocusScope = lazy(() => import('react-aria').then((module) => ({ default: module.FocusScope })));
+const FocusScope = lazy(() => import('react-aria').then(({ FocusScope }) => ({ default: FocusScope })));
 
 const ModalRegion = (): ReactElement | null => {
 	const currentModal = useCurrentModal();
@@ -22,9 +22,11 @@ const ModalRegion = (): ReactElement | null => {
 	return (
 		<ModalPortal>
 			<ModalBackdrop onDismiss={handleDismiss}>
-				<FocusScope contain restoreFocus autoFocus>
-					{currentModal}
-				</FocusScope>
+				<Suspense fallback={null}>
+					<FocusScope contain restoreFocus autoFocus>
+						{currentModal}
+					</FocusScope>
+				</Suspense>
 			</ModalBackdrop>
 		</ModalPortal>
 	);