click-away portal handling (#4154)

* click-away portal handling

Closes #4141.

* fix and test

Author: SteffenDE

assets/js/phoenix_live_view/live_socket.js

@@ -29,6 +29,7 @@ import {
   PHX_RELOAD_STATUS,
   PHX_RUNTIME_HOOK,
   PHX_DROP_TARGET_ACTIVE_CLASS,
+  PHX_TELEPORTED_SRC,
 } from "./constants";
 
 import {
@@ -872,16 +873,25 @@ export default class LiveSocket {
 
   dispatchClickAway(e, clickStartedAt) {
     const phxClickAway = this.binding("click-away");
+    const portal = clickStartedAt.closest(`[${PHX_TELEPORTED_SRC}]`);
+    const portalStartedAt =
+      portal && DOM.byId(portal.getAttribute(PHX_TELEPORTED_SRC));
     DOM.all(document, `[${phxClickAway}]`, (el) => {
+      let startedAt = clickStartedAt;
+      if (portal && !portal.contains(el)) {
+        // If we have a portal and the click-away element is not inside it,
+        // then treat the portal source as the starting point instead.
+        startedAt = portalStartedAt;
+      }
       if (
         !(
-          el.isSameNode(clickStartedAt) ||
-          el.contains(clickStartedAt) ||
+          el.isSameNode(startedAt) ||
+          el.contains(startedAt) ||
           // When clicking a link with custom method,
           // phoenix_html triggers a click on a submit button
           // of a hidden form appended to the body. For such cases
           // where the clicked target is hidden, we skip click-away.
-          !JS.isVisible(clickStartedAt)
+          !JS.isVisible(startedAt)
         )
       ) {
         this.withinOwners(el, (view) => {

assets/test/view_test.ts

@@ -1479,6 +1479,7 @@ describe("View Hooks", function () {
       },
     );
     const customEl = document.createElement("custom-el");
+    customEl.id = "foo";
     el.appendChild(customEl);
     simulateJoinedView(el, liveSocket);
   });

test/e2e/support/portal.ex

@@ -213,6 +213,21 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
         </div>
       </.portal>
     </div>
+
+    <.modal id="non-teleported-modal">
+      This is a non-teleported modal. Open the menu and click an item. The modal must not close.
+      <.button phx-click={JS.show(to: "#teleported-menu-content")}>Open menu</.button>
+      <.portal id="teleported-menu" target="body">
+        <div
+          id="teleported-menu-content"
+          class="hidden z-[100] fixed top-0 left-0 border border-red-500 p-4 bg-white"
+        >
+          <.button phx-click={JS.hide(to: "#teleported-menu-content")}>Close menu</.button>
+        </div>
+      </.portal>
+    </.modal>
+
+    <.button phx-click={show_modal("non-teleported-modal")}>Open non-teleported modal</.button>
     """
   end
 

test/e2e/tests/portal.spec.js

@@ -189,3 +189,31 @@ test("nested portals cleanup and re-render correctly", async ({ page }) => {
   await expect(page.locator("#outer-portal")).toHaveCount(1);
   await expect(page.locator("#inner-portal")).toHaveCount(1);
 });
+
+test("click-away is portal aware", async ({ page }) => {
+  await page.goto("/portal?tick=false");
+  await syncLV(page);
+
+  await page.getByRole("button", { name: "Open non-teleported modal" }).click();
+  await expect(page.locator("#non-teleported-modal-content")).toBeVisible();
+  await page.getByRole("button", { name: "Open menu" }).click();
+  await expect(page.locator("#teleported-menu-content")).toBeVisible();
+  await page.getByRole("button", { name: "Close menu" }).click();
+  await expect(page.locator("#teleported-menu-content")).toBeHidden();
+
+  // Modal must still be visible, despite click away
+  await expect(page.locator("#non-teleported-modal-content")).toBeVisible();
+  // trigger click-away
+  await page
+    .locator("#non-teleported-modal .fixed[role='dialog']")
+    .click({ position: { x: 0, y: 0 } });
+  await expect(page.locator("#non-teleported-modal-content")).toBeHidden();
+
+  // Test that click-away also works properly for teleported modals
+  await page.getByRole("button", { name: "Open modal" }).click();
+  await expect(page.locator("#my-modal-content")).toBeVisible();
+  await page
+    .locator("#my-modal .fixed[role='dialog']")
+    .click({ position: { x: 0, y: 0 } });
+  await expect(page.locator("#my-modal-content")).toBeHidden();
+});