phoenix_live_view 1.1.24 → 1.1.26

package/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,15 +873,28 @@ 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.
+          //
+          // Also, when we have a portal, we don't want to check the visibility
+          // of the portal source, as it's a <template> that is always not visible.
+          // Instead, check the visibility of the original click target.
           !JS.isVisible(clickStartedAt)
         )
       ) {

package/assets/js/phoenix_live_view/view.js

@@ -966,6 +966,15 @@ export default class View {
     }
 
     if (hookElId && !this.viewHooks[hookElId]) {
+      if (ViewHook.deadHook(el)) {
+        // If the hook is on an element outside of the LiveView,
+        // it is initially mounted by the dead view (view.isDead).
+        // As soon as the main LiveView is connected, it is considered
+        // to be owned by it though, but since the live view has a new
+        // viewHooks object, we don't find it. We mark hooks on "dead"
+        // elements as such and just ignore them here.
+        return;
+      }
       // hook created, but not attached (createHook for web component)
       const hook =
         DOM.getCustomElHook(el) ||

package/assets/js/phoenix_live_view/view_hook.ts

@@ -4,6 +4,7 @@ import LiveSocket from "./live_socket";
 import View from "./view";
 
 const HOOK_ID = "hookId";
+const DEAD_HOOK = "deadHook";
 let viewHookID = 1;
 
 export type OnReply = (reply: any, ref: number) => any;
@@ -256,6 +257,9 @@ export class ViewHook<E extends HTMLElement = HTMLElement>
   static elementID(el: HTMLElement) {
     return DOM.private(el, HOOK_ID);
   }
+  static deadHook(el: HTMLElement) {
+    return DOM.private(el, DEAD_HOOK) === true;
+  }
 
   constructor(view: View | null, el: E, callbacks?: Hook) {
     this.el = el;
@@ -263,6 +267,9 @@ export class ViewHook<E extends HTMLElement = HTMLElement>
     this.__listeners = new Set();
     this.__isDisconnected = false;
     DOM.putPrivate(this.el, HOOK_ID, ViewHook.makeID());
+    if (view && view.isDead) {
+      DOM.putPrivate(this.el, DEAD_HOOK, true);
+    }
 
     if (callbacks) {
       // This instance is for an object-literal hook. Copy methods/properties.

package/assets/js/types/view_hook.d.ts

@@ -208,6 +208,7 @@ export declare class ViewHook<E extends HTMLElement = HTMLElement> implements Ho
     get liveSocket(): LiveSocket;
     static makeID(): number;
     static elementID(el: HTMLElement): any;
+    static deadHook(el: HTMLElement): boolean;
     constructor(view: View | null, el: E, callbacks?: Hook);
     mounted(): void;
     beforeUpdate(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "type": "module",

package/priv/static/phoenix_live_view.cjs.js

@@ -3868,6 +3868,7 @@ var js_commands_default = (liveSocket, eventType) => {
 
 // js/phoenix_live_view/view_hook.ts
 var HOOK_ID = "hookId";
+var DEAD_HOOK = "deadHook";
 var viewHookID = 1;
 var ViewHook = class _ViewHook {
   get liveSocket() {
@@ -3879,12 +3880,18 @@ var ViewHook = class _ViewHook {
   static elementID(el) {
     return dom_default.private(el, HOOK_ID);
   }
+  static deadHook(el) {
+    return dom_default.private(el, DEAD_HOOK) === true;
+  }
   constructor(view, el, callbacks) {
     this.el = el;
     this.__attachView(view);
     this.__listeners = /* @__PURE__ */ new Set();
     this.__isDisconnected = false;
     dom_default.putPrivate(this.el, HOOK_ID, _ViewHook.makeID());
+    if (view && view.isDead) {
+      dom_default.putPrivate(this.el, DEAD_HOOK, true);
+    }
     if (callbacks) {
       const protectedProps = /* @__PURE__ */ new Set([
         "el",
@@ -4790,6 +4797,9 @@ var View = class _View {
       return;
     }
     if (hookElId && !this.viewHooks[hookElId]) {
+      if (ViewHook.deadHook(el)) {
+        return;
+      }
       const hook = dom_default.getCustomElHook(el) || logError(`no hook found for custom element: ${el.id}`);
       this.viewHooks[hookElId] = hook;
       hook.__attachView(this);
@@ -5924,7 +5934,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.1.24";
+    return "1.1.26";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
@@ -6530,11 +6540,21 @@ var LiveSocket = class {
   }
   dispatchClickAway(e, clickStartedAt) {
     const phxClickAway = this.binding("click-away");
+    const portal = clickStartedAt.closest(`[${PHX_TELEPORTED_SRC}]`);
+    const portalStartedAt = portal && dom_default.byId(portal.getAttribute(PHX_TELEPORTED_SRC));
     dom_default.all(document, `[${phxClickAway}]`, (el) => {
-      if (!(el.isSameNode(clickStartedAt) || el.contains(clickStartedAt) || // When clicking a link with custom method,
+      let startedAt = clickStartedAt;
+      if (portal && !portal.contains(el)) {
+        startedAt = portalStartedAt;
+      }
+      if (!(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.
+      //
+      // Also, when we have a portal, we don't want to check the visibility
+      // of the portal source, as it's a <template> that is always not visible.
+      // Instead, check the visibility of the original click target.
       !js_default.isVisible(clickStartedAt))) {
         this.withinOwners(el, (view) => {
           const phxEvent = el.getAttribute(phxClickAway);