Merge pull request #1321 from botandrose/morph-reorder-with-data-permanent-children-redux

jorgemanrubia · web-flow · commit ac9e99f71b16 · 2025-03-02T20:43:32.000+01:00
Fix bug where Idiomorph sometimes ignores data-turbo-permanent
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "chai": "~4.3.4",
     "eslint": "^8.13.0",
     "express": "^4.18.2",
-    "idiomorph": "https://github.com/bigskysoftware/idiomorph.git",
+    "idiomorph": "~0.7.2",
     "multer": "^1.4.2",
     "rollup": "^2.35.1"
   },
diff --git a/src/core/morphing.js b/src/core/morphing.js
@@ -1,4 +1,4 @@
-import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js"
+import { Idiomorph } from "idiomorph"
 import { dispatch } from "../util"
 
 export function morphElements(currentElement, newElement, { callbacks, ...options } = {}) {
@@ -9,7 +9,7 @@ export function morphElements(currentElement, newElement, { callbacks, ...option
 }
 
 export function morphChildren(currentElement, newElement) {
-  morphElements(currentElement, newElement.children, {
+  morphElements(currentElement, newElement.childNodes, {
     morphStyle: "innerHTML"
   })
 }
diff --git a/src/tests/fixtures/permanent_children.html b/src/tests/fixtures/permanent_children.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="turbo-refresh-method" content="morph">
+    <meta name="turbo-refresh-scroll" content="preserve">
+
+    <title>Turbo</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
+  </head>
+  <body>
+    <section>
+      <h1>Permanent children</h1>
+    </section>
+
+    <ul>
+      <li id="first-li">
+        <input id="first-checkbox" type="checkbox" data-turbo-permanent>
+        <label for="first-checkbox">First checkbox</label>
+      </li>
+      <li id="second-li">
+        <input id="second-checkbox" type="checkbox" data-turbo-permanent>
+        <label for="second-checkbox">Second checkbox</label>
+      </li>
+    </ul>
+
+    <form id="form" action="/__turbo/refresh" method="post" class="redirect">
+      <input type="hidden" name="path" value="/src/tests/fixtures/permanent_children.html">
+      <input type="hidden" name="sleep" value="50">
+      <input id="form-submit" type="submit" value="form[method=post]">
+    </form>
+
+  </body>
+</html>
+
diff --git a/src/tests/functional/page_refresh_tests.js b/src/tests/functional/page_refresh_tests.js
@@ -331,6 +331,28 @@ test("it preserves data-turbo-permanent elements that don't match when their ids
   await expect(page.locator("#preserve-me")).toHaveText("Preserve me, I have a family!")
 })
 
+test("it preserves data-turbo-permanent children", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/permanent_children.html")
+
+  await page.evaluate(() => {
+    // simulate result of client-side drag-and-drop reordering
+    document.getElementById("first-li").before(document.getElementById("second-li"))
+
+    // set state of data-turbo-permanent checkbox
+    document.getElementById("second-checkbox").checked = true
+  })
+
+  // morph page back to original li ordering
+  await page.click("#form-submit")
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+
+  // data-turbo-permanent checkbox should still be checked
+  assert.ok(
+    await hasSelector(page, "#second-checkbox:checked"),
+    "retains state of data-turbo-permanent child"
+  )
+})
+
 test("renders unprocessable content responses with morphing", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")
 
diff --git a/yarn.lock b/yarn.lock
@@ -1932,9 +1932,10 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-"idiomorph@https://github.com/bigskysoftware/idiomorph.git":
-  version "0.3.0"
-  resolved "https://github.com/bigskysoftware/idiomorph.git#b5115add9f7ab04c04af0624385540dff04e0735"
+idiomorph@~0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/idiomorph/-/idiomorph-0.7.2.tgz#0c385343991c5ecf75472ecd58a4515fc7cdd47f"
+  integrity sha512-fGqT4uBOetEVvKKQkj5bzCQgQlEjb7i4/AJSi7usmflG6HyCGRXAnJLi4aUjJDlPMM3tE/aRCKsUhDAzKabxWQ==
 
 ieee754@^1.1.13:
   version "1.2.1"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js"`
	`1`	`+import { Idiomorph } from "idiomorph"`
`2`	`2`	`import { dispatch } from "../util"`
`3`	`3`
`4`	`4`	`export function morphElements(currentElement, newElement, { callbacks, ...options } = {}) {`
`@@ -9,7 +9,7 @@ export function morphElements(currentElement, newElement, { callbacks, ...option`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`export function morphChildren(currentElement, newElement) {`
`12`		`- morphElements(currentElement, newElement.children, {`
	`12`	`+ morphElements(currentElement, newElement.childNodes, {`
`13`	`13`	`morphStyle: "innerHTML"`
`14`	`14`	`})`
`15`	`15`	`}`