@hotwired/turbo 8.0.22 → 8.0.23

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.21
+Turbo 8.0.23
 Copyright © 2026 37signals LLC
  */
 const FrameLoadingStyle = {
@@ -2119,6 +2119,7 @@ var Idiomorph = (function () {
    * @property {ConfigInternal['callbacks']} callbacks
    * @property {ConfigInternal['head']} head
    * @property {HTMLDivElement} pantry
+   * @property {Element[]} activeElementAndParents
    */
 
   //=============================================================================
@@ -2194,14 +2195,6 @@ var Idiomorph = (function () {
    */
   function morphOuterHTML(ctx, oldNode, newNode) {
     const oldParent = normalizeParent(oldNode);
-
-    // basis for calulating which nodes were morphed
-    // since there may be unmorphed sibling nodes
-    let childNodes = Array.from(oldParent.childNodes);
-    const index = childNodes.indexOf(oldNode);
-    // how many elements are to the right of the oldNode
-    const rightMargin = childNodes.length - (index + 1);
-
     morphChildren(
       ctx,
       oldParent,
@@ -2210,10 +2203,8 @@ var Idiomorph = (function () {
       oldNode, // start point for iteration
       oldNode.nextSibling, // end point for iteration
     );
-
-    // return just the morphed nodes
-    childNodes = Array.from(oldParent.childNodes);
-    return childNodes.slice(index, childNodes.length - rightMargin);
+    // this is safe even with siblings, because normalizeParent returns a SlicedParentNode if needed.
+    return Array.from(oldParent.childNodes);
   }
 
   /**
@@ -2242,8 +2233,11 @@ var Idiomorph = (function () {
 
     const results = fn();
 
-    if (activeElementId && activeElementId !== document.activeElement?.id) {
-      activeElement = ctx.target.querySelector(`#${activeElementId}`);
+    if (
+      activeElementId &&
+      activeElementId !== document.activeElement?.getAttribute("id")
+    ) {
+      activeElement = ctx.target.querySelector(`[id="${activeElementId}"]`);
       activeElement?.focus();
     }
     if (activeElement && !activeElement.selectionEnd && selectionEnd) {
@@ -2321,17 +2315,23 @@ var Idiomorph = (function () {
         }
 
         // if the matching node is elsewhere in the original content
-        if (newChild instanceof Element && ctx.persistentIds.has(newChild.id)) {
-          // move it and all its children here and morph
-          const movedChild = moveBeforeById(
-            oldParent,
-            newChild.id,
-            insertionPoint,
-            ctx,
+        if (newChild instanceof Element) {
+          // we can pretend the id is non-null because the next `.has` line will reject it if not
+          const newChildId = /** @type {String} */ (
+            newChild.getAttribute("id")
           );
-          morphNode(movedChild, newChild, ctx);
-          insertionPoint = movedChild.nextSibling;
-          continue;
+          if (ctx.persistentIds.has(newChildId)) {
+            // move it and all its children here and morph
+            const movedChild = moveBeforeById(
+              oldParent,
+              newChildId,
+              insertionPoint,
+              ctx,
+            );
+            morphNode(movedChild, newChild, ctx);
+            insertionPoint = movedChild.nextSibling;
+            continue;
+          }
         }
 
         // last resort: insert the new node from scratch
@@ -2441,7 +2441,8 @@ var Idiomorph = (function () {
 
           // if the current node contains active element, stop looking for better future matches,
           // because if one is found, this node will be moved to the pantry, reparenting it and thus losing focus
-          if (cursor.contains(document.activeElement)) break;
+          // @ts-ignore pretend cursor is Element rather than Node, we're just testing for array inclusion
+          if (ctx.activeElementAndParents.includes(cursor)) break;
 
           cursor = cursor.nextSibling;
         }
@@ -2491,7 +2492,9 @@ var Idiomorph = (function () {
           // If oldElt has an `id` with possible state and it doesn't match newElt.id then avoid morphing.
           // We'll still match an anonymous node with an IDed newElt, though, because if it got this far,
           // its not persistent, and new nodes can't have any hidden state.
-          (!oldElt.id || oldElt.id === newElt.id)
+          // We can't use .id because of form input shadowing, and we can't count on .getAttribute's presence because it could be a document-fragment
+          (!oldElt.getAttribute?.("id") ||
+            oldElt.getAttribute?.("id") === newElt.getAttribute?.("id"))
         );
       }
 
@@ -2555,8 +2558,11 @@ var Idiomorph = (function () {
       const target =
         /** @type {Element} - will always be found */
         (
-          ctx.target.querySelector(`#${id}`) ||
-            ctx.pantry.querySelector(`#${id}`)
+          // ctx.target.id unsafe because of form input shadowing
+          // ctx.target could be a document fragment which doesn't have `getAttribute`
+          (ctx.target.getAttribute?.("id") === id && ctx.target) ||
+            ctx.target.querySelector(`[id="${id}"]`) ||
+            ctx.pantry.querySelector(`[id="${id}"]`)
         );
       removeElementFromAncestorsIdMaps(target, ctx);
       moveBefore(parentNode, target, after);
@@ -2572,7 +2578,8 @@ var Idiomorph = (function () {
      * @param {MorphContext} ctx
      */
     function removeElementFromAncestorsIdMaps(element, ctx) {
-      const id = element.id;
+      // we know id is non-null String, because this function is only called on elements with ids
+      const id = /** @type {String} */ (element.getAttribute("id"));
       /** @ts-ignore - safe to loop in this way **/
       while ((element = element.parentNode)) {
         let idSet = ctx.idMap.get(element);
@@ -3010,6 +3017,7 @@ var Idiomorph = (function () {
         idMap: idMap,
         persistentIds: persistentIds,
         pantry: createPantry(),
+        activeElementAndParents: createActiveElementAndParents(oldNode),
         callbacks: mergedConfig.callbacks,
         head: mergedConfig.head,
       };
@@ -3050,6 +3058,24 @@ var Idiomorph = (function () {
       return pantry;
     }
 
+    /**
+     * @param {Element} oldNode
+     * @returns {Element[]}
+     */
+    function createActiveElementAndParents(oldNode) {
+      /** @type {Element[]} */
+      let activeElementAndParents = [];
+      let elt = document.activeElement;
+      if (elt?.tagName !== "BODY" && oldNode.contains(elt)) {
+        while (elt) {
+          activeElementAndParents.push(elt);
+          if (elt === oldNode) break;
+          elt = elt.parentElement;
+        }
+      }
+      return activeElementAndParents;
+    }
+
     /**
      * Returns all elements with an ID contained within the root element and its descendants
      *
@@ -3058,7 +3084,8 @@ var Idiomorph = (function () {
      */
     function findIdElements(root) {
       let elements = Array.from(root.querySelectorAll("[id]"));
-      if (root.id) {
+      // root could be a document fragment which doesn't have `getAttribute`
+      if (root.getAttribute?.("id")) {
         elements.push(root);
       }
       return elements;
@@ -3077,7 +3104,9 @@ var Idiomorph = (function () {
      */
     function populateIdMapWithTree(idMap, persistentIds, root, elements) {
       for (const elt of elements) {
-        if (persistentIds.has(elt.id)) {
+        // we can pretend id is non-null String, because the .has line will reject it immediately if not
+        const id = /** @type {String} */ (elt.getAttribute("id"));
+        if (persistentIds.has(id)) {
           /** @type {Element|null} */
           let current = elt;
           // walk up the parent hierarchy of that element, adding the id
@@ -3089,7 +3118,7 @@ var Idiomorph = (function () {
               idSet = new Set();
               idMap.set(current, idSet);
             }
-            idSet.add(elt.id);
+            idSet.add(id);
 
             if (current === root) break;
             current = current.parentElement;
@@ -3203,8 +3232,9 @@ var Idiomorph = (function () {
         if (newContent.parentNode) {
           // we can't use the parent directly because newContent may have siblings
           // that we don't want in the morph, and reparenting might be expensive (TODO is it?),
-          // so we create a duck-typed parent node instead.
-          return createDuckTypedParent(newContent);
+          // so instead we create a fake parent node that only sees a slice of its children.
+          /** @type {Element} */
+          return /** @type {any} */ (new SlicedParentNode(newContent));
         } else {
           // a single node is added as a child to a dummy parent
           const dummyParent = document.createElement("div");
@@ -3223,33 +3253,78 @@ var Idiomorph = (function () {
     }
 
     /**
-     * Creates a fake duck-typed parent element to wrap a single node, without actually reparenting it.
+     * A fake duck-typed parent element to wrap a single node, without actually reparenting it.
+     * This is useful because the node may have siblings that we don't want in the morph, and it may also be moved
+     * or replaced with one or more elements during the morph. This class effectively allows us a window into
+     * a slice of a node's children.
      * "If it walks like a duck, and quacks like a duck, then it must be a duck!" -- James Whitcomb Riley (1849–1916)
-     *
-     * @param {Node} newContent
-     * @returns {Element}
      */
-    function createDuckTypedParent(newContent) {
-      return /** @type {Element} */ (
-        /** @type {unknown} */ ({
-          childNodes: [newContent],
-          /** @ts-ignore - cover your eyes for a minute, tsc */
-          querySelectorAll: (s) => {
-            /** @ts-ignore */
-            const elements = newContent.querySelectorAll(s);
-            /** @ts-ignore */
-            return newContent.matches(s) ? [newContent, ...elements] : elements;
-          },
-          /** @ts-ignore */
-          insertBefore: (n, r) => newContent.parentNode.insertBefore(n, r),
-          /** @ts-ignore */
-          moveBefore: (n, r) => newContent.parentNode.moveBefore(n, r),
-          // for later use with populateIdMapWithTree to halt upwards iteration
-          get __idiomorphRoot() {
-            return newContent;
-          },
-        })
-      );
+    class SlicedParentNode {
+      /** @param {Node} node */
+      constructor(node) {
+        this.originalNode = node;
+        this.realParentNode = /** @type {Element} */ (node.parentNode);
+        this.previousSibling = node.previousSibling;
+        this.nextSibling = node.nextSibling;
+      }
+
+      /** @returns {Node[]} */
+      get childNodes() {
+        // return slice of realParent's current childNodes, based on previousSibling and nextSibling
+        const nodes = [];
+        let cursor = this.previousSibling
+          ? this.previousSibling.nextSibling
+          : this.realParentNode.firstChild;
+        while (cursor && cursor != this.nextSibling) {
+          nodes.push(cursor);
+          cursor = cursor.nextSibling;
+        }
+        return nodes;
+      }
+
+      /**
+       * @param {string} selector
+       * @returns {Element[]}
+       */
+      querySelectorAll(selector) {
+        return this.childNodes.reduce((results, node) => {
+          if (node instanceof Element) {
+            if (node.matches(selector)) results.push(node);
+            const nodeList = node.querySelectorAll(selector);
+            for (let i = 0; i < nodeList.length; i++) {
+              results.push(nodeList[i]);
+            }
+          }
+          return results;
+        }, /** @type {Element[]} */ ([]));
+      }
+
+      /**
+       * @param {Node} node
+       * @param {Node} referenceNode
+       * @returns {Node}
+       */
+      insertBefore(node, referenceNode) {
+        return this.realParentNode.insertBefore(node, referenceNode);
+      }
+
+      /**
+       * @param {Node} node
+       * @param {Node} referenceNode
+       * @returns {Node}
+       */
+      moveBefore(node, referenceNode) {
+        // @ts-ignore - use new moveBefore feature
+        return this.realParentNode.moveBefore(node, referenceNode);
+      }
+
+      /**
+       * for later use with populateIdMapWithTree to halt upwards iteration
+       * @returns {Node}
+       */
+      get __idiomorphRoot() {
+        return this.originalNode;
+      }
     }
 
     /**

package/dist/turbo.es2017-umd.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.21
+Turbo 8.0.23
 Copyright © 2026 37signals LLC
  */
 (function (global, factory) {
@@ -2125,6 +2125,7 @@ Copyright © 2026 37signals LLC
      * @property {ConfigInternal['callbacks']} callbacks
      * @property {ConfigInternal['head']} head
      * @property {HTMLDivElement} pantry
+     * @property {Element[]} activeElementAndParents
      */
 
     //=============================================================================
@@ -2200,14 +2201,6 @@ Copyright © 2026 37signals LLC
      */
     function morphOuterHTML(ctx, oldNode, newNode) {
       const oldParent = normalizeParent(oldNode);
-
-      // basis for calulating which nodes were morphed
-      // since there may be unmorphed sibling nodes
-      let childNodes = Array.from(oldParent.childNodes);
-      const index = childNodes.indexOf(oldNode);
-      // how many elements are to the right of the oldNode
-      const rightMargin = childNodes.length - (index + 1);
-
       morphChildren(
         ctx,
         oldParent,
@@ -2216,10 +2209,8 @@ Copyright © 2026 37signals LLC
         oldNode, // start point for iteration
         oldNode.nextSibling, // end point for iteration
       );
-
-      // return just the morphed nodes
-      childNodes = Array.from(oldParent.childNodes);
-      return childNodes.slice(index, childNodes.length - rightMargin);
+      // this is safe even with siblings, because normalizeParent returns a SlicedParentNode if needed.
+      return Array.from(oldParent.childNodes);
     }
 
     /**
@@ -2248,8 +2239,11 @@ Copyright © 2026 37signals LLC
 
       const results = fn();
 
-      if (activeElementId && activeElementId !== document.activeElement?.id) {
-        activeElement = ctx.target.querySelector(`#${activeElementId}`);
+      if (
+        activeElementId &&
+        activeElementId !== document.activeElement?.getAttribute("id")
+      ) {
+        activeElement = ctx.target.querySelector(`[id="${activeElementId}"]`);
         activeElement?.focus();
       }
       if (activeElement && !activeElement.selectionEnd && selectionEnd) {
@@ -2327,17 +2321,23 @@ Copyright © 2026 37signals LLC
           }
 
           // if the matching node is elsewhere in the original content
-          if (newChild instanceof Element && ctx.persistentIds.has(newChild.id)) {
-            // move it and all its children here and morph
-            const movedChild = moveBeforeById(
-              oldParent,
-              newChild.id,
-              insertionPoint,
-              ctx,
+          if (newChild instanceof Element) {
+            // we can pretend the id is non-null because the next `.has` line will reject it if not
+            const newChildId = /** @type {String} */ (
+              newChild.getAttribute("id")
             );
-            morphNode(movedChild, newChild, ctx);
-            insertionPoint = movedChild.nextSibling;
-            continue;
+            if (ctx.persistentIds.has(newChildId)) {
+              // move it and all its children here and morph
+              const movedChild = moveBeforeById(
+                oldParent,
+                newChildId,
+                insertionPoint,
+                ctx,
+              );
+              morphNode(movedChild, newChild, ctx);
+              insertionPoint = movedChild.nextSibling;
+              continue;
+            }
           }
 
           // last resort: insert the new node from scratch
@@ -2447,7 +2447,8 @@ Copyright © 2026 37signals LLC
 
             // if the current node contains active element, stop looking for better future matches,
             // because if one is found, this node will be moved to the pantry, reparenting it and thus losing focus
-            if (cursor.contains(document.activeElement)) break;
+            // @ts-ignore pretend cursor is Element rather than Node, we're just testing for array inclusion
+            if (ctx.activeElementAndParents.includes(cursor)) break;
 
             cursor = cursor.nextSibling;
           }
@@ -2497,7 +2498,9 @@ Copyright © 2026 37signals LLC
             // If oldElt has an `id` with possible state and it doesn't match newElt.id then avoid morphing.
             // We'll still match an anonymous node with an IDed newElt, though, because if it got this far,
             // its not persistent, and new nodes can't have any hidden state.
-            (!oldElt.id || oldElt.id === newElt.id)
+            // We can't use .id because of form input shadowing, and we can't count on .getAttribute's presence because it could be a document-fragment
+            (!oldElt.getAttribute?.("id") ||
+              oldElt.getAttribute?.("id") === newElt.getAttribute?.("id"))
           );
         }
 
@@ -2561,8 +2564,11 @@ Copyright © 2026 37signals LLC
         const target =
           /** @type {Element} - will always be found */
           (
-            ctx.target.querySelector(`#${id}`) ||
-              ctx.pantry.querySelector(`#${id}`)
+            // ctx.target.id unsafe because of form input shadowing
+            // ctx.target could be a document fragment which doesn't have `getAttribute`
+            (ctx.target.getAttribute?.("id") === id && ctx.target) ||
+              ctx.target.querySelector(`[id="${id}"]`) ||
+              ctx.pantry.querySelector(`[id="${id}"]`)
           );
         removeElementFromAncestorsIdMaps(target, ctx);
         moveBefore(parentNode, target, after);
@@ -2578,7 +2584,8 @@ Copyright © 2026 37signals LLC
        * @param {MorphContext} ctx
        */
       function removeElementFromAncestorsIdMaps(element, ctx) {
-        const id = element.id;
+        // we know id is non-null String, because this function is only called on elements with ids
+        const id = /** @type {String} */ (element.getAttribute("id"));
         /** @ts-ignore - safe to loop in this way **/
         while ((element = element.parentNode)) {
           let idSet = ctx.idMap.get(element);
@@ -3016,6 +3023,7 @@ Copyright © 2026 37signals LLC
           idMap: idMap,
           persistentIds: persistentIds,
           pantry: createPantry(),
+          activeElementAndParents: createActiveElementAndParents(oldNode),
           callbacks: mergedConfig.callbacks,
           head: mergedConfig.head,
         };
@@ -3056,6 +3064,24 @@ Copyright © 2026 37signals LLC
         return pantry;
       }
 
+      /**
+       * @param {Element} oldNode
+       * @returns {Element[]}
+       */
+      function createActiveElementAndParents(oldNode) {
+        /** @type {Element[]} */
+        let activeElementAndParents = [];
+        let elt = document.activeElement;
+        if (elt?.tagName !== "BODY" && oldNode.contains(elt)) {
+          while (elt) {
+            activeElementAndParents.push(elt);
+            if (elt === oldNode) break;
+            elt = elt.parentElement;
+          }
+        }
+        return activeElementAndParents;
+      }
+
       /**
        * Returns all elements with an ID contained within the root element and its descendants
        *
@@ -3064,7 +3090,8 @@ Copyright © 2026 37signals LLC
        */
       function findIdElements(root) {
         let elements = Array.from(root.querySelectorAll("[id]"));
-        if (root.id) {
+        // root could be a document fragment which doesn't have `getAttribute`
+        if (root.getAttribute?.("id")) {
           elements.push(root);
         }
         return elements;
@@ -3083,7 +3110,9 @@ Copyright © 2026 37signals LLC
        */
       function populateIdMapWithTree(idMap, persistentIds, root, elements) {
         for (const elt of elements) {
-          if (persistentIds.has(elt.id)) {
+          // we can pretend id is non-null String, because the .has line will reject it immediately if not
+          const id = /** @type {String} */ (elt.getAttribute("id"));
+          if (persistentIds.has(id)) {
             /** @type {Element|null} */
             let current = elt;
             // walk up the parent hierarchy of that element, adding the id
@@ -3095,7 +3124,7 @@ Copyright © 2026 37signals LLC
                 idSet = new Set();
                 idMap.set(current, idSet);
               }
-              idSet.add(elt.id);
+              idSet.add(id);
 
               if (current === root) break;
               current = current.parentElement;
@@ -3209,8 +3238,9 @@ Copyright © 2026 37signals LLC
           if (newContent.parentNode) {
             // we can't use the parent directly because newContent may have siblings
             // that we don't want in the morph, and reparenting might be expensive (TODO is it?),
-            // so we create a duck-typed parent node instead.
-            return createDuckTypedParent(newContent);
+            // so instead we create a fake parent node that only sees a slice of its children.
+            /** @type {Element} */
+            return /** @type {any} */ (new SlicedParentNode(newContent));
           } else {
             // a single node is added as a child to a dummy parent
             const dummyParent = document.createElement("div");
@@ -3229,33 +3259,78 @@ Copyright © 2026 37signals LLC
       }
 
       /**
-       * Creates a fake duck-typed parent element to wrap a single node, without actually reparenting it.
+       * A fake duck-typed parent element to wrap a single node, without actually reparenting it.
+       * This is useful because the node may have siblings that we don't want in the morph, and it may also be moved
+       * or replaced with one or more elements during the morph. This class effectively allows us a window into
+       * a slice of a node's children.
        * "If it walks like a duck, and quacks like a duck, then it must be a duck!" -- James Whitcomb Riley (1849–1916)
-       *
-       * @param {Node} newContent
-       * @returns {Element}
        */
-      function createDuckTypedParent(newContent) {
-        return /** @type {Element} */ (
-          /** @type {unknown} */ ({
-            childNodes: [newContent],
-            /** @ts-ignore - cover your eyes for a minute, tsc */
-            querySelectorAll: (s) => {
-              /** @ts-ignore */
-              const elements = newContent.querySelectorAll(s);
-              /** @ts-ignore */
-              return newContent.matches(s) ? [newContent, ...elements] : elements;
-            },
-            /** @ts-ignore */
-            insertBefore: (n, r) => newContent.parentNode.insertBefore(n, r),
-            /** @ts-ignore */
-            moveBefore: (n, r) => newContent.parentNode.moveBefore(n, r),
-            // for later use with populateIdMapWithTree to halt upwards iteration
-            get __idiomorphRoot() {
-              return newContent;
-            },
-          })
-        );
+      class SlicedParentNode {
+        /** @param {Node} node */
+        constructor(node) {
+          this.originalNode = node;
+          this.realParentNode = /** @type {Element} */ (node.parentNode);
+          this.previousSibling = node.previousSibling;
+          this.nextSibling = node.nextSibling;
+        }
+
+        /** @returns {Node[]} */
+        get childNodes() {
+          // return slice of realParent's current childNodes, based on previousSibling and nextSibling
+          const nodes = [];
+          let cursor = this.previousSibling
+            ? this.previousSibling.nextSibling
+            : this.realParentNode.firstChild;
+          while (cursor && cursor != this.nextSibling) {
+            nodes.push(cursor);
+            cursor = cursor.nextSibling;
+          }
+          return nodes;
+        }
+
+        /**
+         * @param {string} selector
+         * @returns {Element[]}
+         */
+        querySelectorAll(selector) {
+          return this.childNodes.reduce((results, node) => {
+            if (node instanceof Element) {
+              if (node.matches(selector)) results.push(node);
+              const nodeList = node.querySelectorAll(selector);
+              for (let i = 0; i < nodeList.length; i++) {
+                results.push(nodeList[i]);
+              }
+            }
+            return results;
+          }, /** @type {Element[]} */ ([]));
+        }
+
+        /**
+         * @param {Node} node
+         * @param {Node} referenceNode
+         * @returns {Node}
+         */
+        insertBefore(node, referenceNode) {
+          return this.realParentNode.insertBefore(node, referenceNode);
+        }
+
+        /**
+         * @param {Node} node
+         * @param {Node} referenceNode
+         * @returns {Node}
+         */
+        moveBefore(node, referenceNode) {
+          // @ts-ignore - use new moveBefore feature
+          return this.realParentNode.moveBefore(node, referenceNode);
+        }
+
+        /**
+         * for later use with populateIdMapWithTree to halt upwards iteration
+         * @returns {Node}
+         */
+        get __idiomorphRoot() {
+          return this.originalNode;
+        }
       }
 
       /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwired/turbo",
-  "version": "8.0.22",
+  "version": "8.0.23",
   "description": "The speed of a single-page web application without having to write any JavaScript",
   "module": "dist/turbo.es2017-esm.js",
   "main": "dist/turbo.es2017-umd.js",