regression: Mentioning users with no messages in room (#34997)

apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx

@@ -85,7 +85,7 @@ function ComposerBoxPopup<
 
 	return (
 		<Box position='relative'>
-			<Tile ref={composerBoxPopupRef} padding={0} role='menu' mbe={8} overflow='hidden' aria-labelledby={id}>
+			<Tile ref={composerBoxPopupRef} padding={0} role='menu' mbe={8} overflow='hidden' aria-labelledby={id} name='ComposerBoxPopup'>
 				{title && (
 					<Box bg='tint' pi={16} pb={8} id={id}>
 						{title}

apps/meteor/client/views/room/composer/hooks/useComposerBoxPopupQueries.ts

@@ -22,28 +22,31 @@ export const useComposerBoxPopupQueries = <T extends { _id: string; sort?: numbe
 			slashCommands.commands[(filter as any)?.cmd].providesPreview) ||
 		shouldPopupPreview;
 
+	const queries = useQueries({
+		queries: [
+			{
+				placeholderData: keepPreviousData,
+				queryKey: ['message-popup', 'local', filter, popup],
+				queryFn: () => popup?.getItemsFromLocal && popup.getItemsFromLocal(filter),
+				enabled: enableQuery,
+			},
+			{
+				placeholderData: keepPreviousData,
+				queryKey: ['message-popup', 'server', filter, popup],
+				queryFn: () => popup?.getItemsFromServer && popup.getItemsFromServer(filter),
+				enabled: counter > 0,
+			},
+		],
+	}) as QueriesResults<T[]>;
+
+	useEffect(() => {
+		if (Array.isArray(queries[0].data) && queries[0].data.length < 5) {
+			setCounter(1);
+		}
+	}, [queries]);
+
 	return {
-		queries: useQueries({
-			queries: [
-				popup?.getItemsFromLocal && {
-					placeholderData: keepPreviousData,
-					queryKey: ['message-popup', 'local', filter, popup],
-					queryFn: () => popup?.getItemsFromLocal && popup.getItemsFromLocal(filter),
-					onSuccess: (args: T[]) => {
-						if (args.length < 5) {
-							setCounter(1);
-						}
-					},
-					enabled: enableQuery,
-				},
-				popup?.getItemsFromServer && {
-					placeholderData: keepPreviousData,
-					queryKey: ['message-popup', 'server', filter, popup],
-					queryFn: () => popup?.getItemsFromServer && popup.getItemsFromServer(filter),
-					enabled: counter > 0,
-				},
-			].filter(Boolean) as any,
-		}) as QueriesResults<T[]>,
+		queries,
 		suspended: !enableQuery,
 	};
 };

apps/meteor/tests/e2e/message-composer.spec.ts

@@ -104,4 +104,15 @@ test.describe.serial('message-composer', () => {
 			await poHomeChannel.composer.fill('');
 		});
 	});
+
+	test('should list popup items correctly', async ({ page }) => {
+		await poHomeChannel.sidenav.openChat(targetChannel);
+		await poHomeChannel.content.sendMessage('hello composer');
+
+		await test.step('mention popup', async () => {
+			await page.keyboard.type('hello composer @rocket.cat');
+
+			await expect(poHomeChannel.composerBoxPopup.getByText('rocket.cat')).toBeVisible();
+		});
+	});
 });

apps/meteor/tests/e2e/page-objects/home-channel.ts

@@ -45,6 +45,10 @@ export class HomeChannel {
 		return this.page.locator('textarea[name="msg"]');
 	}
 
+	get composerBoxPopup(): Locator {
+		return this.page.locator('[role="menu"][name="ComposerBoxPopup"]');
+	}
+
 	get userCardToolbar(): Locator {
 		return this.page.locator('[role=toolbar][aria-label="User card actions"]');
 	}