fix ownsElement to account for portals (#3951)

Closes #3950.

Author: SteffenDE

assets/js/phoenix_live_view/view.js

@@ -2176,7 +2176,7 @@ export default class View {
   }
 
   ownsElement(el) {
-    let parentViewEl = el.closest(PHX_VIEW_SELECTOR);
+    let parentViewEl = DOM.closestViewEl(el);
     return (
       el.getAttribute(PHX_PARENT_ID) === this.id ||
       (parentViewEl && parentViewEl.id === this.id) ||

test/e2e/support/portal.ex

@@ -60,6 +60,11 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
                 this.liveSocket.execJS(this.el, this.el.dataset.hide);
                 this.cleanup && this.cleanup();
               },
+            },
+            InsidePortal: {
+              mounted() {
+                this.js().setAttribute(this.el, "data-portalhook-mounted", "true");
+              }
             }
           }
         })
@@ -145,6 +150,8 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
         <p>DOM patching works as expected: {@count}</p>
         <.button phx-click={JS.patch("/portal?param=#{@param_next}")}>Patch this LiveView</.button>
       </.modal>
+
+      <div id="hook-test" phx-hook="InsidePortal">This should get a data attribute</div>
     </.portal>
 
     <.portal id="portal-source-2" target="#app-portal">

test/e2e/tests/portal.spec.js

@@ -103,3 +103,14 @@ test("tooltip example", async ({ page }) => {
   await expect(page.locator("#tooltip-example-portal")).toBeHidden();
   await expect(page.locator("#tooltip-example-no-portal")).toBeVisible();
 });
+
+test("teleported hook works correctly", async ({ page }) => {
+  // https://github.com/phoenixframework/phoenix_live_view/issues/3950
+  await page.goto("/portal?tick=false");
+  await syncLV(page);
+
+  await expect(page.locator("#hook-test")).toHaveAttribute(
+    "data-portalhook-mounted",
+    "true",
+  );
+});