From 705f54ba112fef919cd55e8cf968ec63b59db8aa Mon Sep 17 00:00:00 2001
From: Sam Willis <sam.willis@gmail.com>
Date: Mon, 4 Jul 2022 20:59:32 +0100
Subject: [PATCH] Change Morph plugin to use createElement(template).content
 rather than createRange().createContextualFragment() as the later does not
 support table <tr> or <td> tags

---
 packages/morph/src/dom.js                       |  4 +++-
 tests/cypress/integration/plugins/morph.spec.js | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/morph/src/dom.js b/packages/morph/src/dom.js
index 1e74fe721..0511dcc81 100644
--- a/packages/morph/src/dom.js
+++ b/packages/morph/src/dom.js
@@ -57,7 +57,9 @@ export function dom(el) {
 }
 
 export function createElement(html) {
-    return document.createRange().createContextualFragment(html).firstElementChild
+    const template = document.createElement('template')
+    template.innerHTML = html
+    return template.content.firstElementChild
 }
 
 export function textOrComment(el) {
diff --git a/tests/cypress/integration/plugins/morph.spec.js b/tests/cypress/integration/plugins/morph.spec.js
index 0ad99544f..45dcc31a6 100644
--- a/tests/cypress/integration/plugins/morph.spec.js
+++ b/tests/cypress/integration/plugins/morph.spec.js
@@ -342,3 +342,16 @@ test('can morph multiple nodes',
         get('p:nth-of-type(2)').should(haveText('2'))
     },
 )
+
+test('can morph table tr',
+    [html`
+        <table>
+            <tr><td>1</td></tr>
+        </table>
+    `],
+    ({ get }, reload, window, document) => {
+        let tr = document.querySelector('tr')
+        window.Alpine.morph(tr, '<tr><td>2</td></tr>')
+        get('td').should(haveText('2'))
+    },
+)