diff --git a/apps/meteor/client/views/room/composer/hooks/useComposerBoxPopup.ts b/apps/meteor/client/views/room/composer/hooks/useComposerBoxPopup.ts index fc65ed84ca02..c47f1a5ddab4 100644 --- a/apps/meteor/client/views/room/composer/hooks/useComposerBoxPopup.ts +++ b/apps/meteor/client/views/room/composer/hooks/useComposerBoxPopup.ts @@ -175,7 +175,7 @@ export const useComposerBoxPopup = ({ setPopup(undefined); setFocused(undefined); event.preventDefault(); - event.stopPropagation(); + event.stopImmediatePropagation(); } }); @@ -192,7 +192,7 @@ export const useComposerBoxPopup = ({ select(focused); event.preventDefault(); - event.stopPropagation(); + event.stopImmediatePropagation(); return true; } if (event.which === keys.ARROW_UP && !(event.shiftKey || event.ctrlKey || event.altKey || event.metaKey)) { @@ -211,7 +211,7 @@ export const useComposerBoxPopup = ({ return (focusedIndex > 0 ? list[focusedIndex - 1] : list[list.length - 1]) as T; }); event.preventDefault(); - event.stopPropagation(); + event.stopImmediatePropagation(); return true; } if (event.which === keys.ARROW_DOWN && !(event.shiftKey || event.ctrlKey || event.altKey || event.metaKey)) { @@ -230,7 +230,7 @@ export const useComposerBoxPopup = ({ return (focusedIndex < list.length - 1 ? list[focusedIndex + 1] : list[0]) as T; }); event.preventDefault(); - event.stopPropagation(); + event.stopImmediatePropagation(); return true; } }); diff --git a/apps/meteor/tests/e2e/message-composer.spec.ts b/apps/meteor/tests/e2e/message-composer.spec.ts index e68d82daf78f..2ed3bcbb238e 100644 --- a/apps/meteor/tests/e2e/message-composer.spec.ts +++ b/apps/meteor/tests/e2e/message-composer.spec.ts @@ -69,4 +69,39 @@ test.describe.serial('message-composer', () => { await expect(poHomeChannel.composer).toHaveValue(`[hello composer](${url})`); }); + + test('should select popup item and not send the message when pressing enter', 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 @all'); + + await page.keyboard.press('Enter'); + + await expect(poHomeChannel.composer).toHaveValue('hello composer @all '); + + await poHomeChannel.composer.fill(''); + }); + + await test.step('emoji popup', async () => { + await page.keyboard.type('hello composer :flag_br'); + + await page.keyboard.press('Enter'); + + await expect(poHomeChannel.composer).toHaveValue('hello composer :flag_br: '); + + await poHomeChannel.composer.fill(''); + }); + + await test.step('slash command', async () => { + await page.keyboard.type('/gim'); + + await page.keyboard.press('Enter'); + + await expect(poHomeChannel.composer).toHaveValue('/gimme '); + + await poHomeChannel.composer.fill(''); + }); + }); });