Merge pull request #1225 from hcdeng/bugfix/enable-turbo-stream-morph-on-text

Bugfix/enable turbo stream morph on text

Author: jorgemanrubia

src/core/streams/actions/morph.js

@@ -26,17 +26,19 @@ function beforeNodeRemoved(node) {
 }
 
 function beforeNodeMorphed(target, newElement) {
-  if (target instanceof HTMLElement && !target.hasAttribute("data-turbo-permanent")) {
-    const event = dispatch("turbo:before-morph-element", {
-      cancelable: true,
-      target,
-      detail: {
-        newElement
-      }
-    })
-    return !event.defaultPrevented
+  if (target instanceof HTMLElement) {
+    if (!target.hasAttribute("data-turbo-permanent")) {
+      const event = dispatch("turbo:before-morph-element", {
+        cancelable: true,
+        target,
+        detail: {
+          newElement
+        }
+      })
+      return !event.defaultPrevented
+    }
+    return false
   }
-  return false
 }
 
 function beforeAttributeUpdated(attributeName, target, mutationType) {

src/tests/unit/stream_element_tests.js

@@ -210,6 +210,19 @@ test("action=morph", async () => {
   assert.equal(subject.find("h1#hello")?.textContent, "Hello Turbo Morphed")
 })
 
+test("action=morph with text content change", async () => {
+  const templateElement = createTemplateElement(`<div id="hello">Hello Turbo Morphed</div>`)
+  const element = createStreamElement("morph", "hello", templateElement)
+
+  assert.equal(subject.find("div#hello")?.textContent, "Hello Turbo")
+
+  subject.append(element)
+  await nextAnimationFrame()
+
+  assert.ok(subject.find("div#hello"))
+  assert.equal(subject.find("div#hello")?.textContent, "Hello Turbo Morphed")
+})
+
 test("action=morph children-only", async () => {
   const templateElement = createTemplateElement(`<h1 id="hello-child-element">Hello Turbo Morphed</h1>`)
   const element = createStreamElement("morph", "hello", templateElement)