fix: Focus being forced on last message when interacting with mouse (#…

…32187)

Co-authored-by: Guilherme Gazzo <[email protected]>

.changeset/eleven-seas-explain.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue that forces the focus on the last message when interacting by mouse on message list

apps/meteor/client/views/room/hooks/useMessageListNavigation.ts

@@ -19,7 +19,6 @@ export const useMessageListNavigation = (): { messageListRef: RefCallback<HTMLEl
 	const messageListRef = useCallback(
 		(node: HTMLElement | null) => {
 			let lastMessageFocused: HTMLElement | null = null;
-			let triggeredByKeyboard = false;
 			let initialFocus = true;
 
 			if (!node) {
@@ -68,14 +67,15 @@ export const useMessageListNavigation = (): { messageListRef: RefCallback<HTMLEl
 
 					lastMessageFocused = document.activeElement as HTMLElement;
 				}
-
-				triggeredByKeyboard = true;
 			});
 
 			node.addEventListener(
 				'blur',
 				(e) => {
-					if (!triggeredByKeyboard || !(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)) {
+					if (
+						!(e.relatedTarget as HTMLElement)?.classList.contains('focus-visible') ||
+						!(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)
+					) {
 						return;
 					}
 
@@ -89,20 +89,20 @@ export const useMessageListNavigation = (): { messageListRef: RefCallback<HTMLEl
 			node.addEventListener(
 				'focus',
 				(e) => {
+					const triggeredByKeyboard = (e.target as HTMLElement)?.classList.contains('focus-visible');
+					if (!triggeredByKeyboard || !(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)) {
+						return;
+					}
+
 					if (initialFocus) {
 						massageListFocusManager.focusLast({ accept: (node) => isListItem(node) });
 						lastMessageFocused = document.activeElement as HTMLElement;
 						initialFocus = false;
-					}
-
-					if (!triggeredByKeyboard || !(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)) {
 						return;
 					}
 
 					if (lastMessageFocused && !e.currentTarget.contains(e.relatedTarget) && node.contains(e.target as HTMLElement)) {
 						lastMessageFocused?.focus();
-						lastMessageFocused = null;
-						triggeredByKeyboard = false;
 					}
 				},
 				{ capture: true },

apps/meteor/tests/e2e/messaging.spec.ts

@@ -93,11 +93,37 @@ test.describe.serial('Messaging', () => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await page.locator('[data-qa-type="message"]:has-text("msg1")').click();	
 		await poHomeChannel.composer.click();
-		await page.locator('[data-qa-type="message"]:has-text("msg2")').click();
+		await page.keyboard.press('Shift+Tab');
 
 		await expect(page.locator('[data-qa-type="message"]:has-text("msg2")')).toBeFocused();
 	});
 
+	test('should not focus on the last message when focusing by click', async ({ page }) => {
+		await poHomeChannel.sidenav.openChat(targetChannel);
+		await page.locator('[data-qa-type="message"]:has-text("msg1")').click();	
+
+		await expect(page.locator('[data-qa-type="message"]').last()).not.toBeFocused();
+	});
+
+	test('should focus on the recent message when moving the focus on the list and theres no previous focus', async ({ page }) => {
+		await poHomeChannel.sidenav.openChat(targetChannel);
+		await page.getByRole('button', { name: targetChannel }).first().focus();
+
+		// move focus to the list
+		await page.keyboard.press('Tab');
+		await page.keyboard.press('Tab');
+		await page.keyboard.press('Tab');
+		await expect(page.locator('[data-qa-type="message"]').last()).toBeFocused();
+
+		await page.getByRole('button', { name: targetChannel }).first().click();
+
+		// move focus to the list again
+		await page.keyboard.press('Tab');
+		await page.keyboard.press('Tab');
+		await page.keyboard.press('Tab');
+		await expect(page.locator('[data-qa-type="message"]').last()).toBeFocused();
+	});
+
 	test('expect show "hello word" in both contexts (targetChannel)', async ({ browser }) => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		const { page } = await createAuxContext(browser, Users.user2);