From e994dbb419391eae86123687b2537ea8fa986df0 Mon Sep 17 00:00:00 2001
From: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Date: Sun, 5 Jul 2026 09:05:47 +0100
Subject: [PATCH] Clear the composer preview after sending a message. (#34116)

* Clear the composer preview after sending a message.

* fixup
---
 .../playwright/e2e/links/composer-url-preview.spec.ts  | 10 +++++++---
 .../web/src/components/views/rooms/MessageComposer.tsx |  1 +
 .../views/rooms/MessageComposerUrlPreview.tsx          |  3 ++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/playwright/e2e/links/composer-url-preview.spec.ts b/apps/web/playwright/e2e/links/composer-url-preview.spec.ts
index b3828aeb9c..84eda0641f 100644
--- a/apps/web/playwright/e2e/links/composer-url-preview.spec.ts
+++ b/apps/web/playwright/e2e/links/composer-url-preview.spec.ts
@@ -36,10 +36,14 @@ test.describe("Composer URL preview", () => {
                 );
 
                 await page.goto(`#/room/${room.roomId}`);
-                const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+                const composerRegion = page.getByRole("region", { name: "Message composer" });
+                const composer = composerRegion.getByRole("textbox", { name: "Send an unencrypted message…" });
                 await composer.pressSequentially("https://example.org/");
-
-                await expect(page.getByRole("link", { name: "Example Site" })).toBeVisible();
+                const preview = composerRegion.getByRole("link", { name: "Example Site" });
+                await expect(preview).toBeVisible();
+                await composer.press("Enter");
+                await expect(composer).toBeEmpty();
+                await expect(preview).toBeHidden();
             });
 
             test("does not show a preview when the server returns a 404", async ({ page, app, room }) => {
diff --git a/apps/web/src/components/views/rooms/MessageComposer.tsx b/apps/web/src/components/views/rooms/MessageComposer.tsx
index 6c26d128a3..86e577d1e2 100644
--- a/apps/web/src/components/views/rooms/MessageComposer.tsx
+++ b/apps/web/src/components/views/rooms/MessageComposer.tsx
@@ -395,6 +395,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
     };
 
     private sendMessage = async (): Promise<void> => {
+        this.setState({ urlPreviewComposerContent: "" });
         if (this.state.haveRecording && this.voiceRecordingButton.current) {
             // There shouldn't be any text message to send when a voice recording is active, so
             // just send out the voice recording.
diff --git a/apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx b/apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx
index 071fc4ce2b..4b8dd21233 100644
--- a/apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx
+++ b/apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx
@@ -34,7 +34,8 @@ export function MessageComposerUrlPreviewWrapper({ content }: { content: string
             void vm.updateWithText(content);
         },
         [vm, content],
-        DEBOUNCE_REQUEST_TIMEOUT_MS,
+        // Update instantly if content is empty (e.g. sent message or cleared input)
+        content ? DEBOUNCE_REQUEST_TIMEOUT_MS : 0,
     );
 
     useEffect(() => {