fix: Export Messages tab closing due to "flex-tab close when click outside of it" preference (#36812)

Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>

Author: tiagoevanp

.changeset/fluffy-dryers-obey.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Prevent `Export Messages` tab from closing when selecting messages by clicking outside of it and preference "Hide Contextual Bar by clicking outside of it" is set true.

apps/meteor/client/views/room/MessageList/contexts/SelectedMessagesContext.tsx

@@ -1,3 +1,4 @@
+import type { FormEvent } from 'react';
 import { createContext, useCallback, useContext, useEffect, useSyncExternalStore } from 'react';
 
 import { selectedMessageStore } from '../../providers/SelectedMessagesProvider';
@@ -48,11 +49,16 @@ export const useIsSelecting = (): boolean => {
 	return useSyncExternalStore(subscribe, getSnapshot);
 };
 
-export const useToggleSelect = (mid: string): (() => void) => {
+export const useToggleSelect = (mid: string): ((event?: FormEvent<HTMLElement>) => void) => {
 	const { selectedMessageStore } = useContext(SelectedMessageContext);
-	return useCallback(() => {
-		selectedMessageStore.toggle(mid);
-	}, [mid, selectedMessageStore]);
+
+	return useCallback(
+		(event) => {
+			event?.stopPropagation();
+			selectedMessageStore.toggle(mid);
+		},
+		[mid, selectedMessageStore],
+	);
 };
 
 export const useToggleSelectAll = (): (() => void) => {

apps/meteor/tests/e2e/export-messages.spec.ts

@@ -145,9 +145,7 @@ test.describe('export-messages', () => {
 		await expect(exportMessagesTab.sendButton).toBeEnabled();
 	});
 
-	// TODO: Fix this test - the test is failing because when selecting the message, the import messages tab becomes not visible
-	// and the message is not selected.
-	test.fail('should be able to select a single message to export with hide contextual bar preference enabled', async ({ page, api }) => {
+	test('should be able to select a single message to export with hide contextual bar preference enabled', async ({ page, api }) => {
 		await api.post('/users.setPreferences', {
 			userId: 'rocketchat.internal.admin.test',
 			data: { hideFlexTab: true },