From 5d7e2516b684c3336ac57a1593178e29cf2cf6af Mon Sep 17 00:00:00 2001
From: 1natsu <1natsu172@users.noreply.github.com>
Date: Mon, 13 Jan 2025 07:43:07 +0900
Subject: [PATCH] fix: `autoMount` not working if anchor is already present
 (#1350)

---
 .../ui/__tests__/index.test.ts                | 19 +++++++++++++++++++
 .../src/client/content-scripts/ui/index.ts    |  5 +++++
 2 files changed, 24 insertions(+)

diff --git a/packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts b/packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts
index 108c351c..4913265f 100644
--- a/packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts
+++ b/packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts
@@ -546,6 +546,25 @@ describe('Content Script UIs', () => {
     ] as const)(
       'built-in UI type: $name',
       ({ name, createUiFunction, uiSelector }) => {
+        it('should mount if an anchor already exists at the initialization', async () => {
+          const onMount = vi.fn(appendTestApp);
+          ui = await createUiFunction(ctx, {
+            position: 'inline',
+            onMount,
+            anchor: `#parent > #${DYNAMIC_CHILD_ID}`,
+            page: name === 'iframe' ? '/page.html' : undefined,
+            name: 'test-component',
+          });
+
+          appendTestElement({ id: DYNAMIC_CHILD_ID });
+          ui.autoMount();
+          await runMicrotasks();
+
+          await expect
+            .poll(() => document.querySelector(uiSelector))
+            .not.toBeNull();
+        });
+
         it('should mount when an anchor is dynamically added and unmount when an anchor is removed', async () => {
           const onMount = vi.fn(appendTestApp);
           const onRemove = vi.fn();
diff --git a/packages/wxt/src/client/content-scripts/ui/index.ts b/packages/wxt/src/client/content-scripts/ui/index.ts
index a7d91a86..49182bb4 100644
--- a/packages/wxt/src/client/content-scripts/ui/index.ts
+++ b/packages/wxt/src/client/content-scripts/ui/index.ts
@@ -355,6 +355,11 @@ function autoMountUi(
   async function observeElement(selector: string | null | undefined) {
     let isAnchorExist = !!getAnchor(options);
 
+    // Mount if anchor exists at initialization.
+    if (isAnchorExist) {
+      uiCallbacks.mount();
+    }
+
     while (!abortController.signal.aborted) {
       try {
         const changedAnchor = await waitElement(selector ?? 'body', {