From f8a27dcbec5e262cfd0547f44ac089ac1ba0eec9 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 20 Nov 2023 11:53:35 -0500
Subject: [PATCH] FIX: Rendering a single item in a grid (#24464)

Should fix https://meta.discourse.org/t/-/285768.

Appending without cloning was causing the item to be removed from the
DOM but on a 1-item grid we skip the rest of the grid's rendering,
hence the item was never re-inserted. Cloning ensures we don't remove
the item during processing (it does get removed later on when rendering
the grid's columns).
---
 .../javascripts/discourse/app/lib/columns.js  |  2 +-
 .../discourse/tests/unit/lib/columns-test.js  | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/lib/columns.js b/app/assets/javascripts/discourse/app/lib/columns.js
index 3654748b987..d6ed78cec3a 100644
--- a/app/assets/javascripts/discourse/app/lib/columns.js
+++ b/app/assets/javascripts/discourse/app/lib/columns.js
@@ -85,7 +85,7 @@ export default class Columns {
 
     const wrapper = document.createElement("span");
     wrapper.classList.add("image-wrapper");
-    wrapper.append(item);
+    wrapper.appendChild(item.cloneNode());
     return wrapper;
   }
 
diff --git a/app/assets/javascripts/discourse/tests/unit/lib/columns-test.js b/app/assets/javascripts/discourse/tests/unit/lib/columns-test.js
index 86df676f1b3..16864924d21 100644
--- a/app/assets/javascripts/discourse/tests/unit/lib/columns-test.js
+++ b/app/assets/javascripts/discourse/tests/unit/lib/columns-test.js
@@ -154,4 +154,34 @@ module("Unit | Columns", function (hooks) {
       "one element in column 3"
     );
   });
+
+  test("renders a single item in a P tag", function (assert) {
+    document.getElementById(
+      "qunit-fixture"
+    ).innerHTML = `<div class="d-image-grid">
+<p><img src="/images/avatar.png" alt role="presentation"></p>
+</div>`;
+
+    const grid = document.querySelector(".d-image-grid");
+    const cols = new Columns(grid);
+    assert.strictEqual(cols.items.length, 1);
+
+    assert.strictEqual(
+      grid.dataset.disabled,
+      "true",
+      "disabled attribute is added"
+    );
+
+    assert.strictEqual(
+      document.querySelectorAll(".d-image-grid > .d-image-grid-column").length,
+      0,
+      "no column elements are rendered"
+    );
+
+    assert.strictEqual(
+      document.querySelectorAll(".d-image-grid > p > img").length,
+      1,
+      "an image element is rendered"
+    );
+  });
 });