fix(pat-inject): Fix problem with inserting table rows.

thet · thet · commit 2e70a130ee5d · 2025-04-03T14:15:42.000+02:00
There was a problem with injecting table rows introduced in: b0f94fb The problem occured when setting a table row as content of a temporary <div> wrapper. But a <tr> is not a valid child node of a <div>. This caused visually destroyed tables. Using a <template> tag as wrapper instead of a div solved the problem.
diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
@@ -459,15 +459,15 @@ const inject = {
         /* Called after the XHR has succeeded and we have a new $sources
          * element to inject.
          */
-        const wrapper = document.createElement("div");
+        const wrapper = document.createElement("template");
         if ($sources.length > 0) {
             const method = cfg.sourceMod === "content" ? "innerHTML" : "outerHTML";
             // There might be multiple sources, so we need to loop over them.
             // Access them with "innerHTML" or "outerHTML" depending on the sourceMod.
             const sources_string = [...$sources].map(source => source[method]).join("\n");
             wrapper.innerHTML = sources_string;
 
-            for (const img of wrapper.querySelectorAll("img")) {
+            for (const img of wrapper.content.querySelectorAll("img")) {
                 events.add_event_listener(
                     img,
                     "load",
@@ -481,7 +481,7 @@ const inject = {
         }
 
         // Copy, because after insertion wrapper.children is empty.
-        const source_nodes = [...wrapper.childNodes];
+        const source_nodes = [...wrapper.content.childNodes];
 
         // Now the injection actually happens.
         if (this._inject(trigger, source_nodes, target, cfg)) {
diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
@@ -1868,6 +1868,61 @@ describe("pat-inject", function () {
             });
         });
 
+        describe("9.6 - injecting tables.", function () {
+            let spy_ajax;
+
+            beforeEach(function () {
+                spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
+            });
+
+            afterEach(function () {
+                spy_ajax.mockRestore();
+            });
+
+            it("9.6.1 - Correctly injects table rows", async function () {
+                // Table rows <tr> can only be childs of <tbodys> or <thead> elements.
+                // If they are childs of <table> elements, the browser implicitly adds a <tbody> element.
+                // Table rows cannot be childs of <div> elements or others.
+                // There is one exception though - they can be directly added to <template> elements.
+                // This test checks this problem which popped up during the 9.10 release cycle and was fixed in:
+                // https://github.com/Patternslib/Patterns/pull/1238
+
+                document.body.innerHTML = `
+                    <a class="pat-inject"
+                       href="test.html"
+                       data-pat-inject="
+                        source: tr::element;
+                        target: table;
+                    ">link</a>
+                    <table>
+                    </table>
+                `;
+
+                answer(`
+                    <html>
+                        <body>
+                            <table>
+                                <tr><td>wohoo</td></tr>
+                            </table>
+                        </body>
+                    </html>
+                `);
+
+                const inject = document.querySelector(".pat-inject");
+
+                pattern.init($(inject));
+                await utils.timeout(1); // wait a tick for async to settle.
+
+                inject.click();
+                await utils.timeout(1); // wait a tick for async to settle.
+
+
+                console.log(document.body.outerHTML);
+
+                const injected = document.querySelectorAll("table tr");
+                expect(injected.length).toBe(1);
+            });
+        });
     });
 
     describe("10 - Error handling", () => {
