diff --git a/.changeset/flat-balloons-draw.md b/.changeset/flat-balloons-draw.md
new file mode 100644
index 0000000000000..c9035b7bf2e2b
--- /dev/null
+++ b/.changeset/flat-balloons-draw.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where backup codes modal is not opening when regenerating codes
diff --git a/apps/meteor/client/components/GenericModal/GenericModal.spec.tsx b/apps/meteor/client/components/GenericModal/GenericModal.spec.tsx
index 3acb61326beeb..0204c93504ab6 100644
--- a/apps/meteor/client/components/GenericModal/GenericModal.spec.tsx
+++ b/apps/meteor/client/components/GenericModal/GenericModal.spec.tsx
@@ -40,6 +40,20 @@ describe('callbacks', () => {
expect(handleClose).toHaveBeenCalled();
});
+ it('should call onDismiss and not call onClose', async () => {
+ const onDismiss = jest.fn(() => undefined);
+ const onClose = jest.fn(() => undefined);
+
+ renderModal();
+
+ expect(await screen.findByRole('heading', { name: 'Modal' })).toBeInTheDocument();
+
+ await userEvent.keyboard('{Escape}');
+
+ expect(onDismiss).toHaveBeenCalled();
+ expect(onClose).not.toHaveBeenCalled();
+ });
+
it('should NOT call onClose callback when confirmed', async () => {
const handleConfirm = jest.fn();
const handleClose = jest.fn();
diff --git a/apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx b/apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx
index cf398f4ac9154..d9a3dac000399 100644
--- a/apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx
+++ b/apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx
@@ -11,10 +11,11 @@ import { Method } from './TwoFactorModal';
type TwoFactorTotpModalProps = {
onConfirm: OnConfirm;
onClose: () => void;
+ onDismiss?: () => void;
invalidAttempt?: boolean;
};
-const TwoFactorTotpModal = ({ onConfirm, onClose, invalidAttempt }: TwoFactorTotpModalProps): ReactElement => {
+const TwoFactorTotpModal = ({ onConfirm, onClose, onDismiss, invalidAttempt }: TwoFactorTotpModalProps): ReactElement => {
const { t } = useTranslation();
const [code, setCode] = useState('');
const ref = useAutoFocus();
@@ -36,6 +37,7 @@ const TwoFactorTotpModal = ({ onConfirm, onClose, invalidAttempt }: TwoFactorTot
confirmText={t('Verify')}
title={t('Enter_TOTP_password')}
onClose={onClose}
+ onDismiss={onDismiss}
variant='warning'
confirmDisabled={!code}
tagline={t('Two-factor_authentication')}
diff --git a/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx b/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
index c447fb2449284..a8d2230eec62e 100644
--- a/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
+++ b/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
@@ -115,8 +115,8 @@ const TwoFactorTOTP = (props: TwoFactorTOTPProps): ReactElement => {
}
};
- setModal();
- }, [closeModal, dispatchToastMessage, regenerateCodesFn, setModal, t]);
+ setModal( undefined} onConfirm={onRegenerate} onClose={closeModal} />);
+ }, [closeModal, dispatchToastMessage, setModal, regenerateCodesFn, t]);
return (