fix: Mentions popup remains open after canceling message edit (#38635)

Author: aleksandernsilva

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

@@ -28,6 +28,7 @@ type ComposerBoxPopupResult<T extends { _id: string; sort?: number }> =
 			suspended: boolean;
 			filter: unknown;
 			clear: () => void;
+			update: () => void;
 	  }
 	| {
 			option: undefined;
@@ -39,6 +40,7 @@ type ComposerBoxPopupResult<T extends { _id: string; sort?: number }> =
 			suspended: undefined;
 			filter: unknown;
 			clear: () => void;
+			update: () => void;
 	  };
 
 const keys = {
@@ -269,6 +271,7 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>(
 			suspended: undefined,
 			filter: undefined,
 			clear,
+			update: setOptionByInput,
 		};
 	}
 
@@ -282,5 +285,6 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>(
 		suspended,
 		filter,
 		clear,
+		update: setOptionByInput,
 	};
 };

apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx

@@ -178,10 +178,15 @@ const MessageBox = ({
 			event.stopPropagation();
 
 			chat.currentEditingMessage.reset().then((reset) => {
-				if (!reset) {
-					chat.currentEditingMessage.cancel();
-					chat.currentEditingMessage.stop();
+				// NOTE: if the message was reset (i.e. content changed), we just update the popup (to re-apply/remove the preview)
+				if (reset) {
+					popup.update();
+					return;
 				}
+
+				chat.currentEditingMessage.cancel();
+				chat.currentEditingMessage.stop();
+				popup.clear();
 			});
 		}
 	};
@@ -378,7 +383,6 @@ const MessageBox = ({
 	);
 
 	const shouldPopupPreview = useEnablePopupPreview(popup.filter, popup.option);
-
 	return (
 		<>
 			{chat.composer?.quotedMessages && <MessageBoxReplies />}

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

@@ -116,6 +116,62 @@ test.describe.serial('message-composer', () => {
 		});
 	});
 
+	test('should close mention popup when canceling a message edit via "Cancel" button', async ({ page }) => {
+		await poHomeChannel.navbar.openChat(targetChannel);
+		await poHomeChannel.content.sendMessage('hello composer');
+
+		await test.step('expect to edit last message', async () => {
+			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
+			await poHomeChannel.content.openLastMessageMenu();
+			await poHomeChannel.content.btnOptionEditMessage.click();
+			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer');
+		});
+
+		await test.step('expect to open popup on mention', async () => {
+			await page.keyboard.type(' @');
+			await expect(poHomeChannel.composer.boxPopup).toBeVisible();
+		});
+
+		await test.step('expect popup to close after the first edit is cancelled', async () => {
+			await poHomeChannel.composer.btnCancel.click();
+			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer');
+			await expect(poHomeChannel.composer.boxPopup).not.toBeVisible();
+		});
+
+		await test.step('expect to leave editing mode', async () => {
+			await poHomeChannel.composer.btnCancel.click();
+			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
+		});
+	});
+
+	test('should close mention popup when canceling a message edit via keyboard', async ({ page }) => {
+		await poHomeChannel.navbar.openChat(targetChannel);
+		await poHomeChannel.content.sendMessage('hello composer');
+
+		await test.step('expect to edit last message', async () => {
+			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
+			await poHomeChannel.content.openLastMessageMenu();
+			await poHomeChannel.content.btnOptionEditMessage.click();
+			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer');
+		});
+
+		await test.step('expect to open popup on mention', async () => {
+			await page.keyboard.type(' @');
+			await expect(poHomeChannel.composer.boxPopup).toBeVisible();
+		});
+
+		await test.step('expect popup to close after the first edit is cancelled', async () => {
+			await page.keyboard.press('Escape');
+			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer');
+			await expect(poHomeChannel.composer.boxPopup).not.toBeVisible();
+		});
+
+		await test.step('expect to leave editing mode', async () => {
+			await page.keyboard.press('Escape');
+			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
+		});
+	});
+
 	test.describe('audio recorder', () => {
 		test('should open audio recorder', async () => {
 			await poHomeChannel.navbar.openChat(targetChannel);

apps/meteor/tests/e2e/page-objects/fragments/composer.ts

@@ -33,6 +33,10 @@ export abstract class Composer {
 		return this.root.getByRole('button', { name: 'Send' });
 	}
 
+	get btnCancel(): Locator {
+		return this.root.getByRole('button', { name: 'Cancel', exact: true });
+	}
+
 	get btnOptionFileUpload(): Locator {
 		return this.toolbarPrimaryActions.getByRole('button', { name: 'Upload file' });
 	}