workaround for corner case where a data-turbo-permanent node is moved…

… to a random spot in the doc before morphing.

src/core/morphing.js

@@ -2,11 +2,13 @@ import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js"
 import { dispatch } from "../util"
 
 export function morphElements(currentElement, newElement, { callbacks, ...options } = {}) {
+  const cbs = new DefaultIdiomorphCallbacks(callbacks)
   Idiomorph.morph(currentElement, newElement, {
     ...options,
     twoPass: true,
-    callbacks: new DefaultIdiomorphCallbacks(callbacks)
+    callbacks: cbs
   })
+  cbs.pruneDuplicatedPermanentNodes(currentElement)
 }
 
 export function morphChildren(currentElement, newElement) {
@@ -22,6 +24,25 @@ class DefaultIdiomorphCallbacks {
     this.#beforeNodeMorphed = beforeNodeMorphed || (() => true)
   }
 
+  // workaround for data-turbo-permanent elements being moved to a weird location in the DOM pre-morph
+  #permanentNodesWithDuplicates = []
+
+  beforeNodePantried = (node) => {
+    if (node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id)) {
+      this.#permanentNodesWithDuplicates.push(node)
+      return false
+    }
+  }
+
+  pruneDuplicatedPermanentNodes(root) {
+    this.#permanentNodesWithDuplicates.forEach(node => {
+      root.querySelectorAll(`[id=${node.id}]`).forEach(dup => {
+        if (dup !== node) dup.remove()
+      })
+    })
+  }
+  // end workaround
+
   beforeNodeAdded = (node) => {
     return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
   }