phoenix_live_view 1.1.28 → 1.1.30

package/assets/js/phoenix_live_view/dom_patch.js

@@ -54,7 +54,11 @@ export default class DOMPatch {
       afterphxChildAdded: [],
       aftertransitionsDiscarded: [],
     };
-    this.withChildren = opts.withChildren || opts.undoRef || false;
+    // unlock patches pass undoRef and must morph the locked element itself, not
+    // only its children. The first client ref is 0, so this must check for the
+    // option's presence rather than truthiness.
+    this.withChildren =
+      opts.withChildren || opts.undoRef !== undefined || false;
     this.undoRef = opts.undoRef;
   }
 
@@ -105,6 +109,12 @@ export default class DOMPatch {
           targetContainer = clonedTree.querySelector(
             `[data-phx-component="${this.targetCID}"]`,
           );
+          // The visible DOM can still contain the target CID while the locked
+          // clone has gone stale and no longer does. In that case there is no
+          // safe clone target for this component diff, so leave the visible DOM
+          // locked and wait for a later patch instead of throwing or patching
+          // outside the locked tree.
+          if (!targetContainer) return;
         }
       }
     }
@@ -148,6 +158,13 @@ export default class DOMPatch {
           if (isJoinPatch) {
             return node.id;
           }
+
+          // If ID was touched by JavaScript hook, use PHX_MAGIC_ID for matching.
+          // This ensures morphdom can match elements even when JS modifies their IDs.
+          if (DOM.private(node, "clientsideIdAttribute")) {
+            return node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
+          }
+
           return (
             node.id || (node.getAttribute && node.getAttribute(PHX_MAGIC_ID))
           );
@@ -309,7 +326,16 @@ export default class DOMPatch {
             phxViewportBottom,
           );
           DOM.cleanChildNodes(toEl, phxUpdate);
+          const isFocusedFormEl =
+            focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl);
+          const focusedSelectChanged =
+            isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
           if (this.skipCIDSibling(toEl)) {
+            // A skipped update returns before the normal update path below, so
+            // it must still perform the lock bookkeeping that keeps private
+            // cloned trees in sync.
+            this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
+            this.copyNestedPrivateLock(fromEl, toEl);
             // if this is a live component used in a stream, we may need to reorder it
             this.maybeReOrderStream(fromEl);
             return false;
@@ -354,30 +380,7 @@ export default class DOMPatch {
           // We keep a reference to the cloned tree in the element's private data, and
           // on ack (view.undoRefs), we morph the cloned tree with the true fromEl in the DOM to
           // apply any changes that happened while the element was locked.
-          const isFocusedFormEl =
-            focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl);
-          const focusedSelectChanged =
-            isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
-          if (fromEl.hasAttribute(PHX_REF_SRC)) {
-            const ref = new ElementRef(fromEl);
-            // only perform the clone step if this is not a patch that unlocks
-            if (
-              ref.lockRef &&
-              (!this.undoRef || !ref.isLockUndoneBy(this.undoRef))
-            ) {
-              DOM.applyStickyOperations(fromEl);
-              const isLocked = fromEl.hasAttribute(PHX_REF_LOCK);
-              const clone = isLocked
-                ? DOM.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true)
-                : null;
-              if (clone) {
-                DOM.putPrivate(fromEl, PHX_REF_LOCK, clone);
-                if (!isFocusedFormEl) {
-                  fromEl = clone;
-                }
-              }
-            }
-          }
+          fromEl = this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
 
           // nested view handling
           if (DOM.isPhxChild(toEl)) {
@@ -391,14 +394,10 @@ export default class DOMPatch {
             return false;
           }
 
-          // if we are undoing a lock, copy potentially nested clones over
-          if (this.undoRef && DOM.private(toEl, PHX_REF_LOCK)) {
-            DOM.putPrivate(
-              fromEl,
-              PHX_REF_LOCK,
-              DOM.private(toEl, PHX_REF_LOCK),
-            );
-          }
+          // If we are undoing a lock, copy potentially nested clones over.
+          // This keeps an inner locked subtree's private clone alive while an
+          // ancestor lock is being reconciled.
+          this.copyNestedPrivateLock(fromEl, toEl);
           // now copy regular DOM.private data
           DOM.copyPrivates(toEl, fromEl);
 
@@ -649,18 +648,26 @@ export default class DOMPatch {
     }
 
     if (streamAt === 0) {
-      el.parentElement.insertBefore(el, el.parentElement.firstElementChild);
+      this.moveOrInsertBefore(
+        el.parentElement,
+        el,
+        el.parentElement.firstElementChild,
+      );
     } else if (streamAt > 0) {
       const children = Array.from(el.parentElement.children);
       const oldIndex = children.indexOf(el);
       if (streamAt >= children.length - 1) {
-        el.parentElement.appendChild(el);
+        this.moveOrInsertBefore(el.parentElement, el, null);
       } else {
         const sibling = children[streamAt];
         if (oldIndex > streamAt) {
-          el.parentElement.insertBefore(el, sibling);
+          this.moveOrInsertBefore(el.parentElement, el, sibling);
         } else {
-          el.parentElement.insertBefore(el, sibling.nextElementSibling);
+          this.moveOrInsertBefore(
+            el.parentElement,
+            el,
+            sibling.nextElementSibling,
+          );
         }
       }
     }
@@ -668,6 +675,25 @@ export default class DOMPatch {
     this.maybeLimitStream(el);
   }
 
+  // Reorder a child within its parent. When supported, use the atomic
+  // moveBefore (https://developer.mozilla.org/en-US/docs/Web/API/Node/moveBefore)
+  // so connected custom elements (and other state-bearing nodes like iframes)
+  // are not disconnected and reconnected by the move. Falls back to
+  // insertBefore otherwise. Passing `ref === null` moves to the end.
+  // See also https://github.com/phoenixframework/phoenix_live_view/issues/4212.
+  moveOrInsertBefore(parent, child, ref) {
+    if (typeof parent.moveBefore === "function") {
+      try {
+        parent.moveBefore(child, ref);
+        return;
+      } catch {
+        // moveBefore can throw (e.g. HierarchyRequestError) in cases where
+        // an atomic move is not possible; fall back to insertBefore.
+      }
+    }
+    parent.insertBefore(child, ref);
+  }
+
   maybeLimitStream(el) {
     const { limit } = this.getStreamInsert(el);
     const children = limit !== null && Array.from(el.parentElement.children);
@@ -722,6 +748,39 @@ export default class DOMPatch {
     return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP);
   }
 
+  maybeCloneLockedElement(fromEl, isFocusedFormEl) {
+    if (!fromEl.hasAttribute(PHX_REF_SRC)) return fromEl;
+
+    const ref = new ElementRef(fromEl);
+    // Only perform the clone step while the element remains locked. lockRef can
+    // be 0 for the first event, so compare against null/undefined explicitly.
+    if (
+      ref.lockRef === null ||
+      (this.undoRef !== undefined && ref.isLockUndoneBy(this.undoRef))
+    ) {
+      return fromEl;
+    }
+
+    DOM.applyStickyOperations(fromEl);
+    const clone = fromEl.hasAttribute(PHX_REF_LOCK)
+      ? DOM.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true)
+      : null;
+    if (!clone) return fromEl;
+
+    DOM.putPrivate(fromEl, PHX_REF_LOCK, clone);
+    return isFocusedFormEl ? fromEl : clone;
+  }
+
+  copyNestedPrivateLock(fromEl, toEl) {
+    // During unlock morphs, toEl may be the private clone that accumulated a
+    // nested locked subtree. Copy that private clone back to fromEl before the
+    // outer unlock finishes so the nested element can apply its own ack later.
+    // undoRef can be 0, so presence is checked with undefined.
+    if (this.undoRef === undefined || !DOM.private(toEl, PHX_REF_LOCK)) return;
+
+    DOM.putPrivate(fromEl, PHX_REF_LOCK, DOM.private(toEl, PHX_REF_LOCK));
+  }
+
   targetCIDContainer(html) {
     if (!this.isCIDPatch()) {
       return;

package/assets/js/phoenix_live_view/hooks.js

@@ -131,7 +131,6 @@ const isAtViewportTop = (el, scrollContainer) => {
   const rect = el.getBoundingClientRect();
   return (
     Math.ceil(rect.top) >= top(scrollContainer) &&
-    Math.ceil(rect.left) >= 0 &&
     Math.floor(rect.top) <= bottom(scrollContainer)
   );
 };
@@ -140,7 +139,6 @@ const isAtViewportBottom = (el, scrollContainer) => {
   const rect = el.getBoundingClientRect();
   return (
     Math.ceil(rect.bottom) >= top(scrollContainer) &&
-    Math.ceil(rect.left) >= 0 &&
     Math.floor(rect.bottom) <= bottom(scrollContainer)
   );
 };
@@ -149,7 +147,6 @@ const isWithinViewport = (el, scrollContainer) => {
   const rect = el.getBoundingClientRect();
   return (
     Math.ceil(rect.top) >= top(scrollContainer) &&
-    Math.ceil(rect.left) >= 0 &&
     Math.floor(rect.top) <= bottom(scrollContainer)
   );
 };
@@ -264,6 +261,15 @@ Hooks.InfiniteScroll = {
     }
   },
 
+  updated() {
+    // Check if the scroll container still exists
+    // https://github.com/phoenixframework/phoenix_live_view/issues/4169.
+    if (this.scrollContainer && !this.scrollContainer.isConnected) {
+      this.destroyed();
+      this.mounted();
+    }
+  },
+
   destroyed() {
     if (this.scrollContainer) {
       this.scrollContainer.removeEventListener("scroll", this.onScroll);

package/assets/js/phoenix_live_view/js.js

@@ -599,6 +599,11 @@ const JS = {
       .filter((attr) => !alteredAttrs.includes(attr))
       .concat(removes);
 
+    // If element ID is touched via JavaScript, mark it for cheap lookup during morphdom
+    if (sets.some(([attr, _val]) => attr === "id")) {
+      DOM.putPrivate(el, "clientsideIdAttribute", true);
+    }
+
     DOM.putSticky(el, "attrs", (currentEl) => {
       newRemoves.forEach((attr) => currentEl.removeAttribute(attr));
       newSets.forEach(([attr, val]) => currentEl.setAttribute(attr, val));

package/assets/js/phoenix_live_view/view.js

@@ -689,7 +689,8 @@ export default class View {
 
     patch.after("updated", (el) => {
       if (updatedHookIds.has(el.id)) {
-        this.getHook(el).__updated();
+        const hook = this.getHook(el);
+        hook && hook.__updated();
       }
     });
 

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

@@ -38,11 +38,14 @@ export default class DOMPatch {
     getStreamInsert(el: any): any;
     setStreamRef(el: any, ref: any): void;
     maybeReOrderStream(el: any, isNew: any): void;
+    moveOrInsertBefore(parent: any, child: any, ref: any): void;
     maybeLimitStream(el: any): void;
     transitionPendingRemoves(): void;
     isChangedSelect(fromEl: any, toEl: any): boolean;
     isCIDPatch(): boolean;
     skipCIDSibling(el: any): any;
+    maybeCloneLockedElement(fromEl: any, isFocusedFormEl: any): any;
+    copyNestedPrivateLock(fromEl: any, toEl: any): void;
     targetCIDContainer(html: any): any;
     indexOf(parent: any, child: any): number;
     teleport(el: any, morph: any): void;

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

@@ -2,6 +2,7 @@ export default Hooks;
 declare namespace Hooks {
     namespace InfiniteScroll {
         function mounted(): void;
+        function updated(): void;
         function destroyed(): void;
         function throttle(interval: any, callback: any): (...args: any[]) => void;
         function findOverrunTarget(): any;

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -1359,15 +1359,15 @@ var top = (scrollContainer) => {
 };
 var isAtViewportTop = (el, scrollContainer) => {
   const rect = el.getBoundingClientRect();
-  return Math.ceil(rect.top) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.top) <= bottom(scrollContainer);
+  return Math.ceil(rect.top) >= top(scrollContainer) && Math.floor(rect.top) <= bottom(scrollContainer);
 };
 var isAtViewportBottom = (el, scrollContainer) => {
   const rect = el.getBoundingClientRect();
-  return Math.ceil(rect.bottom) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.bottom) <= bottom(scrollContainer);
+  return Math.ceil(rect.bottom) >= top(scrollContainer) && Math.floor(rect.bottom) <= bottom(scrollContainer);
 };
 var isWithinViewport = (el, scrollContainer) => {
   const rect = el.getBoundingClientRect();
-  return Math.ceil(rect.top) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.top) <= bottom(scrollContainer);
+  return Math.ceil(rect.top) >= top(scrollContainer) && Math.floor(rect.top) <= bottom(scrollContainer);
 };
 Hooks.InfiniteScroll = {
   mounted() {
@@ -1458,6 +1458,12 @@ Hooks.InfiniteScroll = {
       window.addEventListener("scroll", this.onScroll);
     }
   },
+  updated() {
+    if (this.scrollContainer && !this.scrollContainer.isConnected) {
+      this.destroyed();
+      this.mounted();
+    }
+  },
   destroyed() {
     if (this.scrollContainer) {
       this.scrollContainer.removeEventListener("scroll", this.onScroll);
@@ -2264,7 +2270,7 @@ var DOMPatch = class {
       afterphxChildAdded: [],
       aftertransitionsDiscarded: []
     };
-    this.withChildren = opts.withChildren || opts.undoRef || false;
+    this.withChildren = opts.withChildren || opts.undoRef !== void 0 || false;
     this.undoRef = opts.undoRef;
   }
   before(kind, callback) {
@@ -2303,6 +2309,8 @@ var DOMPatch = class {
           targetContainer = clonedTree.querySelector(
             `[data-phx-component="${this.targetCID}"]`
           );
+          if (!targetContainer)
+            return;
         }
       }
     }
@@ -2331,6 +2339,9 @@ var DOMPatch = class {
           if (isJoinPatch) {
             return node.id;
           }
+          if (dom_default.private(node, "clientsideIdAttribute")) {
+            return node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
+          }
           return node.id || node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
         },
         // skip indexing from children when container is stream
@@ -2452,7 +2463,11 @@ var DOMPatch = class {
             phxViewportBottom
           );
           dom_default.cleanChildNodes(toEl, phxUpdate);
+          const isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
+          const focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
           if (this.skipCIDSibling(toEl)) {
+            this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
+            this.copyNestedPrivateLock(fromEl, toEl);
             this.maybeReOrderStream(fromEl);
             return false;
           }
@@ -2480,22 +2495,7 @@ var DOMPatch = class {
           if (fromEl.type === "number" && fromEl.validity && fromEl.validity.badInput) {
             return false;
           }
-          const isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
-          const focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
-          if (fromEl.hasAttribute(PHX_REF_SRC)) {
-            const ref = new ElementRef(fromEl);
-            if (ref.lockRef && (!this.undoRef || !ref.isLockUndoneBy(this.undoRef))) {
-              dom_default.applyStickyOperations(fromEl);
-              const isLocked = fromEl.hasAttribute(PHX_REF_LOCK);
-              const clone2 = isLocked ? dom_default.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true) : null;
-              if (clone2) {
-                dom_default.putPrivate(fromEl, PHX_REF_LOCK, clone2);
-                if (!isFocusedFormEl) {
-                  fromEl = clone2;
-                }
-              }
-            }
-          }
+          fromEl = this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
           if (dom_default.isPhxChild(toEl)) {
             const prevSession = fromEl.getAttribute(PHX_SESSION);
             dom_default.mergeAttrs(fromEl, toEl, { exclude: [PHX_STATIC] });
@@ -2506,13 +2506,7 @@ var DOMPatch = class {
             dom_default.applyStickyOperations(fromEl);
             return false;
           }
-          if (this.undoRef && dom_default.private(toEl, PHX_REF_LOCK)) {
-            dom_default.putPrivate(
-              fromEl,
-              PHX_REF_LOCK,
-              dom_default.private(toEl, PHX_REF_LOCK)
-            );
-          }
+          this.copyNestedPrivateLock(fromEl, toEl);
           dom_default.copyPrivates(toEl, fromEl);
           if (dom_default.isPortalTemplate(toEl)) {
             portalCallbacks.push(() => this.teleport(toEl, morph));
@@ -2694,23 +2688,47 @@ var DOMPatch = class {
       return;
     }
     if (streamAt === 0) {
-      el.parentElement.insertBefore(el, el.parentElement.firstElementChild);
+      this.moveOrInsertBefore(
+        el.parentElement,
+        el,
+        el.parentElement.firstElementChild
+      );
     } else if (streamAt > 0) {
       const children = Array.from(el.parentElement.children);
       const oldIndex = children.indexOf(el);
       if (streamAt >= children.length - 1) {
-        el.parentElement.appendChild(el);
+        this.moveOrInsertBefore(el.parentElement, el, null);
       } else {
         const sibling = children[streamAt];
         if (oldIndex > streamAt) {
-          el.parentElement.insertBefore(el, sibling);
+          this.moveOrInsertBefore(el.parentElement, el, sibling);
         } else {
-          el.parentElement.insertBefore(el, sibling.nextElementSibling);
+          this.moveOrInsertBefore(
+            el.parentElement,
+            el,
+            sibling.nextElementSibling
+          );
         }
       }
     }
     this.maybeLimitStream(el);
   }
+  // Reorder a child within its parent. When supported, use the atomic
+  // moveBefore (https://developer.mozilla.org/en-US/docs/Web/API/Node/moveBefore)
+  // so connected custom elements (and other state-bearing nodes like iframes)
+  // are not disconnected and reconnected by the move. Falls back to
+  // insertBefore otherwise. Passing `ref === null` moves to the end.
+  // See also https://github.com/phoenixframework/phoenix_live_view/issues/4212.
+  moveOrInsertBefore(parent, child, ref) {
+    if (typeof parent.moveBefore === "function") {
+      try {
+        parent.moveBefore(child, ref);
+        return;
+      } catch {
+      }
+    }
+    parent.insertBefore(child, ref);
+  }
   maybeLimitStream(el) {
     const { limit } = this.getStreamInsert(el);
     const children = limit !== null && Array.from(el.parentElement.children);
@@ -2751,6 +2769,25 @@ var DOMPatch = class {
   skipCIDSibling(el) {
     return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP);
   }
+  maybeCloneLockedElement(fromEl, isFocusedFormEl) {
+    if (!fromEl.hasAttribute(PHX_REF_SRC))
+      return fromEl;
+    const ref = new ElementRef(fromEl);
+    if (ref.lockRef === null || this.undoRef !== void 0 && ref.isLockUndoneBy(this.undoRef)) {
+      return fromEl;
+    }
+    dom_default.applyStickyOperations(fromEl);
+    const clone2 = fromEl.hasAttribute(PHX_REF_LOCK) ? dom_default.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true) : null;
+    if (!clone2)
+      return fromEl;
+    dom_default.putPrivate(fromEl, PHX_REF_LOCK, clone2);
+    return isFocusedFormEl ? fromEl : clone2;
+  }
+  copyNestedPrivateLock(fromEl, toEl) {
+    if (this.undoRef === void 0 || !dom_default.private(toEl, PHX_REF_LOCK))
+      return;
+    dom_default.putPrivate(fromEl, PHX_REF_LOCK, dom_default.private(toEl, PHX_REF_LOCK));
+  }
   targetCIDContainer(html) {
     if (!this.isCIDPatch()) {
       return;
@@ -3688,6 +3725,9 @@ var JS = {
     const alteredAttrs = sets.map(([attr, _val]) => attr).concat(removes);
     const newSets = prevSets.filter(([attr, _val]) => !alteredAttrs.includes(attr)).concat(sets);
     const newRemoves = prevRemoves.filter((attr) => !alteredAttrs.includes(attr)).concat(removes);
+    if (sets.some(([attr, _val]) => attr === "id")) {
+      dom_default.putPrivate(el, "clientsideIdAttribute", true);
+    }
     dom_default.putSticky(el, "attrs", (currentEl) => {
       newRemoves.forEach((attr) => currentEl.removeAttribute(attr));
       newSets.forEach(([attr, val]) => currentEl.setAttribute(attr, val));
@@ -4593,7 +4633,8 @@ var View = class _View {
     });
     patch.after("updated", (el) => {
       if (updatedHookIds.has(el.id)) {
-        this.getHook(el).__updated();
+        const hook = this.getHook(el);
+        hook && hook.__updated();
       }
     });
     patch.after("discarded", (el) => {
@@ -5935,7 +5976,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.1.28";
+    return "1.1.30";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";