Fix composer preview getting stuck on a single module API preview (#34173)

* Unset composer preview

* add a test

apps/web/src/components/views/rooms/MessageComposerUrlPreview.test.tsx

@@ -96,4 +96,29 @@ describe("MessageComposerUrlPreview", () => {
             { timeout: DEBOUNCE_REQUEST_TIMEOUT_MS },
         );
     });
+    test("to reset module component override when filter function does not match ", async () => {
+        const modApi = {
+            customComponents: new CustomComponentsApi(),
+        } as ModuleApi;
+        modApi.customComponents.registerComposerPreview(
+            (text) => text === "show-fake-preview",
+            () => <strong>Fake preview</strong>,
+        );
+        const { container, getByText, rerender } = wrapComponent(
+            <MessageComposerUrlPreviewWrapper content="show-fake-preview" moduleApi={modApi} />,
+        );
+        await waitFor(
+            () => {
+                expect(getByText("Fake preview")).toBeDefined();
+            },
+            { timeout: DEBOUNCE_REQUEST_TIMEOUT_MS },
+        );
+        rerender(<MessageComposerUrlPreviewWrapper content="other-text" moduleApi={modApi} />);
+        await waitFor(
+            () => {
+                expect(container).toMatchInlineSnapshot(`<div />`);
+            },
+            { timeout: DEBOUNCE_REQUEST_TIMEOUT_MS },
+        );
+    });
 });

apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx

@@ -52,9 +52,7 @@ export function MessageComposerUrlPreviewWrapper({
                 () => <MessageComposerUrlPreviewView vm={vm} />,
             );
 
-            if (customComponent) {
+            setCustomComponent(customComponent);
-                setCustomComponent(customComponent);
-            }
             // We still update the VM even if the custom component is used since
             // the component may choose to render the original component.
             void vm.updateWithText(content);